Vue计算属性

Vue基础 专栏收录该内容
59 篇文章 0 订阅

在Vue中可以使用插值语法来显示data中的数据,但是如果需要多个数据进行整合,使用插值就显得程序太过复杂、繁琐,可以使用计算属性来将多个数据进行整合,形成一个计算属性,计算属性使用关键字computed

计算属性格式:

computed: {

     属性名: function () {

           具体内容

      }

 }

计算属性虽然定义了一个函数,但是它代表一个属性,在调用时不需要加小括号,按照一般属性调用。例如<h2>{{result}}</h2>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
</head>
<body>
<div id="app">
  <h3>总价:{{totalPrice}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      foods: [
        {id: 10, name: "红烧肉", price: 25},
        {id: 11, name: "宫保鸡丁", price: 30},
        {id: 12, name: "酸菜鱼", price: 33},
        {id: 14, name: "素三鲜", price: 20}
      ]
    },
    computed: {
      totalPrice: function () {
        let results = 0;
        // for (let i = 0; i < this.foods.length; i++) {
        //   results += this.foods[i].price;
        // }
        //遍历foods数组,i中存放着foods的下标
        // for(let i in this.foods){
        //   results += this.foods[i].price;
        // }
        //food中存放着数组foods中的具体对象
        for (let food of this.foods) {
          results += food.price;
        }
        return results;
      }
    }
  })
</script>
</body>
</html>

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

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

抵扣说明:

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

余额充值