vue计算属性(面试必问)

本文详细介绍了Vue.js中计算属性的使用方法,包括将其写在computed中、作为函数形式以及其实质是一个属性。强调了计算属性的特性:必须有返回值、名字不能与data中的数据重复、依赖data值、响应式更新和缓存机制。计算属性适用于根据已有数据生成新值和动态计算场景。在示例中,展示了如何计算总价和平均价,用于展示商品总价和平均价格。
摘要由CSDN通过智能技术生成

1、如何使用

1.1写在computed里面

1.2写起来像一个函数

1.3其实是一个属性

2、特点:

2.1计算属性必须有返回值

2.2计算属性的名字不能和data数据的名字重复

2.3计算属性可以使用data中的值

2.4计算属性的值只随着依赖值的属性变化而变化

2.5计算属性有缓存

3、计算属性的使用场景

3.1根据已知值得到一个新值

3.2新值跟着已知值(依赖值)的变化而变化

4、计算属性 在案例中的应用

<td colspan="2">总价钱为: {{ totalPrice }}</td>
<td colspan="2">平均价: {{ avgPrice }}</td>

  computed: {
    totalPrice() {
      let total = 0;
      //forEach遍历数据
      this.list.forEach((v) => {
        total += v.price;
      });
      return total;
    },
    avgPrice() {
    //().toFixed(2)保留两位小数
      return (this.totalPrice / this.list.length).toFixed(2);
    },
  },

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值