day58-计算属性

计算属性

姓名案例

一个姓（输入框）

一个名（输入框）

一个姓名的汇总

插值语法

利用model属性，将firstname与lastname双向绑定

在页面修改时也会在第三行汇总修改

<body>
 <div id="root">
     姓:<input type="text" v-model="firstname"><br>
     名:<input type="text" v-model="lastname"><br>
     姓名:<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
 </div>
 
 </body>
 <script>
     Vue.config.productionTip = false
 
 
     new Vue({
         el:'#root',
         data:{
             firstname:'张',
             lastname:'三'
         }
     })
 </script>

methods方式

使用methods方法编写fullname函数，返回firstname与lastname，其中methods中的this就是vue实例

<body>
 <div id="root">
     姓:<input type="text" v-model="firstname"><br>
     名:<input type="text" v-model="lastname"><br>
     姓名:<span>{{fullName()}}</span>
 </div>
 
 </body>
 <script>
     Vue.config.productionTip = false
 
 
     new Vue({
         el:'#root',
         data:{
             firstname:'张',
             lastname:'三'
         },
         methods:{
             fullName(){
                 return this.firstname +'-'+ this.lastname
             }
         }
     })
 </script>

计算属性

要用的属性不存在，需要通过已有属性计算出来

原理：底层借助了object.defineproperty方法提供的getter与setter

使用computed：{}

写计算属性函数，其中写get与set函数访问fullname时，调用get函数，修改fullname时，调用set函数

 <body>
 
 <div id="root">
     姓:<input type="text" v-model="firstname"><br>
     名:<input type="text" v-model="lastname"><br>
     姓名:<span>{{fullName}}</span>
 </div>
 
 </body>
 <script>
     Vue.config.productionTip = false
 
 
     const vm = new Vue({
         el:'#root',
         data:{
             firstname:'张',
             lastname:'三'
         },
         computed:{
             fullName:{
                  get(){
                      //当有人读取fullname时，get会被调用，返回值为fullname的值
                      //get什么时候调用：1.初次读取fullname时。2.所依赖的属性发生变化时
                      // console.log(this)  // 此处的this是vm
                      return this.firstname + '-' + this.lastname
                  },
                  set(value){
                      //set什么时候调用：当fullname被修改时
                      console.log('set',value)
                      const arr = value.split('-')
                      this.firstname = arr[0]
                      this.lastname = arr[1]
                  }
             }
         }
 
     })
 </script>

总结：

<!-- 
    计算属性： 
        1.定义：要用的属性不存在，通过已有的属性计算出来 
        2.原理：底层借助了object.defineproperty方法提供的getter与setter 
        3.优势：内部有缓存机制，调试更加方便 
        4.备注：计算属性最终会出现在vm身上，直接读取即可 
                   如果计算属性要被修改，必须写set函数去相应改变，且set中要引起计算时依赖的数据发生变化 
-->

计算属性的简写

只有在只读取不修改属性的情况下才能简写

<body>
 
 <div id="root">
     姓:<input type="text" v-model="firstname"><br>
     名:<input type="text" v-model="lastname"><br>
     姓名:<span>{{fullName}}</span>
 </div>
 
 </body>
 <script>
     Vue.config.productionTip = false
 
 
     const vm = new Vue({
         el:'#root',
         data:{
             firstname:'张',
             lastname:'三'
         },
         computed:{
             //完整写法：
             /*
             fullName:{
                  get(){
                      return this.firstname + '-' + this.lastname
                  },
                  set(value){
                      console.log('set',value)
                      const arr = value.split('-')
                      this.firstname = arr[0]
                      this.lastname = arr[1]
                  }
                 }
              */
             //简写：只有考虑读取不考虑修改的情况下才能用简写
             fullName(){
                 return this.firstname + '-' + this.lastname
             }
         }
 
     })
 </script>