vue计算属性

195 阅读1分钟

vue计算属性computed:{}

相对于methods定义的方法,computed定义的方法一般看成属性值进行使用

计算属性会进行缓存,如果多次使用时只调用一次。而methods里的方法使用一次就要调用一次。

例子:

<div>

  <p>总价是:{{totalprice}}</p> 

 </div> 

 <script src="./js/vue.js"></script> 

 <script> 

   let vue =new Vue({ 

     el:'#app', 

     data:{ 

       books:[

          {id:1,name:'钢铁',price:46}, 

           {id:2,name:'海底',price:39},

           {id:3,name:'汤姆',price:56} 

         ] },

     computed:{

            totalprice:function(){ 

                let result=0 

                for(let i=0;i<this.books.length;i++)

                  { result+=this.books[i].price } return result } } 

        }) 

 </script>

计算书籍总价:141