vue之computed计算属性

计算属性computed 的说明：

计算属性computed是根据data中自己已有的属性计算得到的一个新的属性，创建计算属性，通过computed关键字他是一个对象，计算属性是基于他们的以来进行缓存的，computed 对象里面是计算属性，它是一个函数但是可以当做属性来使用

实例如下：

1 computed: {
2            // 这里的fullName就是一个计算属性 它是一个函数 但是可以当做属性来使用
3           fullName(){
4             return this.firstName + this.lastName
5           }
6         }

整体代码如下：

 1 <body>
 2     <div id="app">
 3       <input type="text" v-model="firstName">
 4       <input type="text" v-model="lastName">
 5        <!-- 这样写不好 这样使得模板逻辑变得厚重 不易维护 -->
 6       <div>全名：{{ firstName + lastName }}</div>
 7       <h1>使用computed</h1>
 8       <div>全名：{{fullName}}</div>
 9 
10     </div>
11     <script>
12        //计算属性computed是根据data中自己已有的属性 计算得到的一个新的属性
13       var vm = new Vue({
14         el: '#app',
15         data: {
16           firstName: '',
17           lastName: ''
18         },
19          //创建计算属性，通过computed关键字 他是一个对象，计算属性是基于他们的以来进行缓存的
20         computed: {
21            // 这里的fullName就是一个计算属性 它是一个函数 但是可以当做属性来使用
22           fullName(){
23             return this.firstName + this.lastName
24           }
25         }
26       })
27     </script>
28   </body>

页面展示：

vue之computed计算属性

猜你喜欢