vue 基础 计算属性 与 methods

vue 基础 计算属性

一、计算属性的基本使用

        <div id="app">
            <h2>{{fullName}}</h2>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    firstName:'tian',
                    lastName:'ya',
                },
                //计算属性
                computed:{
                    fullName:function(){
                        return this.firstName + ' '+ this.lastName
                    }
                },
            })
        </script>

说明：
1.在data中定义 firstName：’ feng’, lastName:‘ling’
2.在vue中 定义 computed属性 实现fullName方法
3. return this.firstName + ’ ’ + this.lastName
4. 在app中 用插值表达式 {{fullName}}
5. 这样就 显示出了 fengling

二.计算属性的复杂操作

  <div id="app">
            <h2>总价格:{{totalPrice}}</h2>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    books:[
                        {id:110,name:'斗罗大陆1',price:200},
                        {id:111,name:'斗罗大陆2',price:200},
                        {id:112,name:'斗罗大陆3',price:200},
                        {id:113,name:'斗罗大陆4',price:200},
                        {id:114,name:'斗罗大陆5',price:200},
                    ]
                },
                //计算属性
                computed:{
                   totalPrice:function(){
                       let result = 0;
                       for(let i=0;i<this.books.length;i++){
                        result += this.books[i].price
                       }
                       return result
                   }
                },
            })
        </script>

步骤：计算书的价格
1.data中定义书
2.computed中实现totalPrice
3.先定义初始值 result = 0
4.for循环遍历 书
5.result += this.books[i].price
6.返回 resutl return result

三、计算属性与methods的对比

       <div id="app">
            <h2>{{getFullName()}}</h2>
            <h2>{{getFullName()}}</h2>
            <h2>{{getFullName()}}</h2>
            <h2>{{fullName}}</h2>
            <h2>{{fullName}}</h2>
            <h2>{{fullName}}</h2>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    firstName: "tian",
                    lastName: "ya",
                },
                methods: {
                    getFullName: function () {
                        console.log('getFullName');//调用3次
                        return this.firstName + " " + this.lastName;
                    },
                },
                //计算属性
                computed: {
                    fullName: function () {
                        console.log('fullName');//调用1次
                        return this.firstName + " " + this.lastName;
                    },
                },
            });
        </script>

说明：
1.计算属性 只会调用一次
2.methods 中的函数 回调用多次 会浪费性能