Vue学习笔记【31】——Vue路由（computed计算属性的使用）

computed计算属性的使用

1. 默认只有getter的计算属性：

 <div id="app">
     <input type="text" v-model="firstName"> +
     <input type="text" v-model="lastName"> =
     <span>{{fullName}}</span>
   </div>
 ​
   <script>
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         firstName: 'jack',
         lastName: 'chen'
       },
       methods: {},
       computed: { // 计算属性； 特点：当计算属性中所依赖的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
         fullName() {
           return this.firstName + ' - ' + this.lastName;
         }
       }
     });
   </script>
 ​

2. 定义有getter和setter的计算属性：

 <div id="app">
     <input type="text" v-model="firstName">
     <input type="text" v-model="lastName">
     <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
     <input type="button" value="修改fullName" @click="changeName">
 ​
     <span>{{fullName}}</span>
   </div>
 ​
   <script>
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         firstName: 'jack',
         lastName: 'chen'
       },
       methods: {
         changeName() {
           this.fullName = 'TOM - chen2';
         }
       },
       computed: {
         fullName: {
           get: function () {
             return this.firstName + ' - ' + this.lastName;
           },
           set: function (newVal) {
             var parts = newVal.split(' - ');
             this.firstName = parts[0];
             this.lastName = parts[1];
           }
         }
       }
     });
   </script>
 ​