VUE-基础二 -V-bind与计算属性

V-bind

计算属性：computed

示例一

假如title是name和slogen合并而成的，
首先在data里面声明另个属性。

name:'标题前缀 ',
slogen:'标题后缀'

然后在计算属性中进行拼接如下：

computed:{
    title:{
      get(){
        console.log('computed log');
        return this.name+this.slogen;
      }
    }
  }

然后在html中使用多次。

  <h1>{{title}}</h1>
  <h1>{{title}}</h1>
  <h1>{{title}}</h1>

console台只打印了一次log，说明只获取一次并且缓存起来了。

示例二

例如有一个集合里面存储书籍信息：

books:[
        {id:1,name:'book001',price:1},
        {id:2,name:'book001',price:2},
        {id:3,name:'book001',price:3},
        {id:4,name:'book001',price:4},
      ]

如果要计算里面的书籍价钱总和，则可以使用计算属性。

totalPrice:{
      get(){
        return this.books.reduce((s,n)=>s+n.price,0);
      }
    },