计算属性_3.1 初步了解计算属性

目标：

1. 了解什么是计算属性；
2. 练习 "计算购物车总价" demo 。

---

一、什么是计算属性

我们先来做一个小demo：”反转字符串“。

分析：

• 先把字符串渲染出来；
• 把字符串变成数组，然后反转数组；
• 然后将数组变回字符串。

前面我们学过 "文本插值"，用 "文本插值" 来实现：

1、先将字符串渲染到页面中：

<div id="app">
    {{ text }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '我们的爱情到这刚刚好'
  }
})

2、将字符串变成数组，可以使用 "split" 方法：

<div id="app">
    {{ text.split('') }}    // [ "我", "们", "的", "爱", "情", "到", "这", "刚", "刚", "好" ]
</div>

3、将数组反转，可以使用 "reverse" 方法：

<div id="app">
    {{ text.split('').reverse() }}    // [ "好", "刚", "刚", "这", "到", "情", "爱", "的", "们", "我" ]
</div>

4、将数组变成字符串，可以使用 "join" 方法：

<div id="app">
    {{ text.split('').reverse().join('') }}    // 好刚刚这到情爱的们我
</div>

至此，字符串成功被反转。

注意，我们说过，{{ }} 不支持多行表达式。但是上面这种形式，仍然是单行表达式。

思考：

这么一个小demo，{{ }} 中要写这么长(好吧其实不算长)，那如果有更多更复杂的需求，岂不是要在 {{ }} 中写一个 "出师表" 的长度？？？

于是，为了解决上面这个问题，有位兄弟就勇敢的站了出来，说: "把代码交给我吧！"

他就是 "计算属性"。

如果表达式过长，或者逻辑过于复杂时，我们就可以把代码写在计算属性中。

这位兄弟长啥样？你知道 "计算机" 的英文不，computer 。

计算属性和它长得差不多 —— computed 。

同样的，我们要把 computed 写在 Vue 实例中。

computed 中，可以写个函数。

现在用 computed 把上面的 demo 重写一遍：

<div id="app">
    {{ reverseText }}                              // 4、写上计算属性中定义的函数名，就可以将其渲染
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '我们的爱情到这刚刚好'
  },
  computed: {                                          // 1、计算属性，与el、data平级
    reverseText: function () {                         // 2、计算属性中，定义函数
      return this.text.split('').reverse().join('')    // 3、将字符串进行一系列加工后返回
    }                                                  //    可以通过this，拿到这个Vue实例的text属性
  }
})

现在你能看到，字符串依然被成功渲染。

总结：

• 如果表达式过长，或者逻辑过于复杂时，就可以使用计算属性；
• 计算属性中的函数，一定要返回一个值。

---

二、"计算购物车总价" demo

需求：现有两个购物车，计算出两个购物车中所有商品的总价。

分析：

• 先在 data 中整两个购物车出来，购物车可以是数组形式；
• 往购物车里塞东西（在数组中添加元素，元素应该是对象形式）；
• 遍历两个购物车中所有物品的价格并返回。

实现：

1、在 data 中整两个购物车

<div id="app">
</div>

var app = new Vue({
  el: '#app',
  data: {
    shoppingcart1: [],    // 1、购物车1
    shoppingcart2: []     // 2、购物车2
  }
})

2、往数组中加东西，商品应该是对象形式

var app = new Vue({
  el: '#app',
  data: {
    shoppingcart1: [
      {'name': 'apple', 'price': 2, 'count': 5},    // 1、5个苹果，每个2元
      {'name': 'peach', 'price': 6, 'count': 2}     // 2、2个桃子，每个6元
    ],
    shoppingcart2: [
      {'name': 'shirt', 'price': 100, 'count': 1},  // 3、1件衬衫，100元
      {'name': 'shoes', 'price': 200, 'count': 2}    // 4、2双鞋子，每双200
    ]
  }
})

3、在计算属性中，遍历两个购物车，并返回价格

var app = new Vue({
  el: '#app',
  data: {
    shoppingcart1: [
      {'name': 'apple', 'price': 2, 'count': 5},
      {'name': 'peach', 'price': 6, 'count': 2}
    ],
    shoppingcart2: [
      {'name': 'shirt', 'price': 100, 'count': 1},
      {'name': 'shoe', 'price': 200, 'count': 2}
    ]
  },

  computed: {
    sum: function () {
      var prices = 0    // 1、定义 prices 变量
      for (var i = 0; i < this.shoppingcart1.length; i ++) {    // 2、遍历 shoppingcart1
        prices += this.shoppingcart1[i].price * this.shoppingcart1[i].count    // 3、总价 = 单价 * 数量
      }
      for (var j = 0; j < this.shoppingcart2.length; j ++) {    // 4、遍历 shoppingcart2
        prices += this.shoppingcart2[j].price * this.shoppingcart2[j].count    // 5、与第3步同理
      }
      return prices    // 6、一定要返回 prices
    }
  }
})

4、在页面中渲染价格

<div id="app">
    商品总价为：{{ sum }}
</div>

不出错的话，浏览器应该显示：

完~~