Vue项目中如何使用computed计算属性

computed:

1、基本使用:

在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名(一般为名词)。

1.1 应用场景:

当数据A的逻辑很复杂时,把A这个数据写在计算属性中。

1.2 代码位置:

通过选项computed:{计算属性a:值}

1.3 值:

带有返回值return的函数。

计算属性a和data中的数据用法一样。计算属性在computed中进行定义,无需再在data中定义,在template中直接可进行使用,使用方式与data中定义的数据一样。

<body>
  <div id='app'>
    {
   {
   msg}}
    <hr>
    {
   {
   str}}
  </div>
  <script src='./vue.js'></script>
  <script>
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: 'abc'
      },
      computed: {
   
        str: function () {
   
          return this.msg
        }
      },
      methods: {
   
      }
    })
  </script>
</body>

执行结果:
在这里插入图片描述

2、复杂操作-结合data中数据:

当计算属性b依赖了data中的数据a时,当a变化时,b会自动变化。这也是在开发中通常用到的情况。比如在购物的时候,下某一订单时,每选择一件商品(对应data中的数据a),合计费用(对应计算属性b)就会跟着变化。
在这里插入图片描述
下方的例子即模拟上方的效果

  • 23
    点赞
  • 94
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值