Vue计算属性computed，全选反选案例

计算属性

一个变量的值，依赖另外一些数据计算而来的结果

注意：计算属性也是vue数据变量，所以不能和data里变量重名，用法和data相同的

语法：

computed:{
   
  "计算属性名"(){
   
     return 值
  }
}

{
  {计算属性名}}

简单的例子

   <div id="app">
     <input type="text" v-model.number="num1">
     +
     <input type="text" v-model.number="num2">
     =
     <input type="text" v-model.number="sum">
   </div>

达到改变num1或num2的值，sum值会随着改变 的效果

   new Vue({
   
     el:"#app",
     data:{
   
       num1:0,
       num2:0,
      //  sum:0
     },
     computed:{
   
       sum(){
   
        //  必须有return  return的值就是计算属性的值
         //console.log(1)
         return this.num1 + this.num2;
       }
     }
   })

1：计算属性和data属性都是变量——不能重名
2：页面第一次加载，计算属性会执行——赋初始值
3：函数内的依赖的变量变化，会自动重新计算结果返回

优势：
1.带缓存
2.计算属性对应的函数执行后，会把return值缓存起来
3.依赖的变量不变，多次调用都是从缓存取值
4.依赖的变量改变， 函数会"自动" 重新执行–并缓存新的值

案例：

增加物品时，总价格和均价会随之改变：

  <div id="app">
    <input type="text" @focus="flag = true" :class="{
    'bor':flag}" placeholder="资产名称" v-model="name">
    <input type="text" placeholder="价格" v-model.number="price">
    <button @click="add">新增</button>

    <table>
      <