vue计算属性的使用(computed)

当需要使用多个变量的计算结果时,可以利用vue的计算属性,将计算结果返回给一个计算属性,后面直接调用该属性,利用计算属性结合v-module可以实现简单的计算器功能
1.定义和调用
计算属性定义在computed中,调用时使用mustache语法调用且后面不跟()
用计算属性得到总价格

<div id="app">
    <ul>
      <li v-for='price in books'>{{price}}</li>
    </ul>
    <h2>总价:<span>{{totalprice}}</span></h2>
    <!-- 虽然computed中的totalprice是以函数定义,但是使用时不要在后面加(),
      这里它是一个计算属性,本质是一个属性 -->
  </div>
  <script>
    const app=new Vue({
      el:'#app',
      data:{
        books:[{id:'o1',name:'aaa',price:98},{id:'o2',name:'bbb',price:108},
          {id:'o3',name:'ccc',price:78},{id:'o4',name:'ddd',price:79}
        ]
      },
      computed:{ // 计算属性定义在computed中,以函数的形式定义并返回一个结果
        totalprice:function(){
          let result=0
          for(let item of this.books){
            result+=item.price
          }
          return result
        }
      },
      methods:{
      }
    })
  </script>

执行结果:
在这里插入图片描述
注意:计算属性是一个属性,它实际拥有get 和set 方法,但由于一般都不使用set方法,只使用get方法,所以为了简便,我们看到的计算属性就以函数形式定义,所以使用时后面不能加()。
2.计算属性和methods的区别:计算属性具有缓存机制。
methods中的方法每使用一次方法就会被调用一次,不管里面的数据是否发生变化。而使用计算属性时,只要里面影响结果的变量没有发生变化,无论计算属性被使用多少次,函数都只会被调用一次。

  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值