Vue computed計算屬性

阿新 • • 發佈：2020-12-16

技術標籤：vue js

下面展示一些簡單的計算屬性的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
< 
body>
    <div id="app">
        <h2>{{masssage}}</h2>
        <h2> {{masssage}},哈哈哈</h2>
        <h2>{{flight + ' ' + masssage}}</h2>
        <h2>{{flight}} {{masssage}}</h2>
        <h2> {{theng*2}}</h2>
    </div>

    < 
script src="/vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                masssage:'你好啊',
                flight:'kobe',
                theng:20,
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{flight}} {{ theng}}</h2>
        <h2>{{getFllname()}}</h2>
        <!-- 不需要加小括號 fullname會被當成一個屬性去計算 -->
        <h2>{{fullname}}</h2>
    </div>

    <script src="/vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                // masssage:'你好啊',
                flight:'kobe',
                theng: 'holle',
            },
            methods:{
                getFllname(){
                    return this.flight + " " + this.theng;
                }
            },
            //計算屬性
            computed:{
                fullname:function(){
                    return this.flight +" " + this.theng;
                }
            }
        })
    </script>
</body>
</html>

同樣相對於上面較為複雜一點的計算屬性使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <!-- <h2 v-for="(itme,book) in books">{{itme}}</h2> -->
       <h2>總價格：{{toterprice}} </h2>
    </div>

    <script src="/vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
             books:[
                 {id:1, bookname:'Unix程式設計藝術', price:119},
                 {id:2, bookname:'程式碼大全', price:109},
                 {id:3, bookname:'深入理解計算原理', price:99},
                 {id:4, bookname:'現代作業系統', price:89},
             ]
            },
            computed:{
                toterprice:function(){

                    //定義一個變數，用於儲存價格
                    let result = 0;
                    for(let i = 0; i < this.books.length; i++){
                        //i < books累加 
                        result += this.books[i].price; 
                    }
                    //返回 result
                    return result;
                }
                
            }
        })
    </script>
</body>
</html>

計算屬性中 getter 和 setter 的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{fullname}}</h2>
    </div>

    <script src="/vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                flight:'kobe',
                theng: 'holle',
            },
            //計算屬性
            computed:{
                    //計算屬性完整寫法
                fullname:{
                    //一般setter方法不寫，為只讀屬性，如果寫了setter 就沒有隻讀屬性
                    //寫引數
                    set:function(newValue){
                        console.log(newValue);
                        //修改flight 和 theng的值
                        const names = newValue.split(" ");
                        this.flight = names[0];
                        this.theng = names[1];
                    },
                    get:function(){
                        return this.flight +" " + this.theng;
                    }
                }
                //計算屬性沒有setter方法，簡寫
                // fullname:function(){
                //     return this.flight +" " + this.theng;
                // }
            }
        })
    </script>
</body>
</html>