第八章 watch监听 85 computed-计算属性的使用和3个特点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15 
16       <input type="text" v-model="firstname">+
17       <input type="text" v-model="middlename">+
18       <input type="text" v-model="lastname">=
19       <input type="text" v-model="fullname">
20 
21       <p>{{fullname}}</p>
22       <p>{{fullname}}</p>
23       <p>{{fullname}}</p>
24       </div>
25 
26       <script>
27           //创建 Vue 实例，得到 ViewModel
28           var vm =  new Vue({
29               el:'#app',
30         data:{
31           firstname:'',
32           lastname:'',
33           middlename:''
34         },
35         methods:{},
36         computed:{ //在computed中，可以定义一些 属性，这些属性，叫做【计算属性】，计算属性的本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把它们的名称，直接当作 属性来使用；并不会把计算属性，当作方法去调用；
37 
38           //注意1：计算属性，在引用的时候，一定不要加()去调用，直接把它当作 普通属性去使用就好了；
39           //注意2：只要计算属性，这个function内部，所用到的任何 data中的数据发生了变化，就会立即重新计算 这个计算属性的值
40           //注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果 计算属性方法所依赖的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
41         'fullname':function(){
42           console.log('ok')
43           return this.firstname+'-'+this.middlename+'-'+this.lastname
44         }
45         }
46           });
47       </script>
48   </body>
49 </html>
posted on 2019-06-12 19:14 songsong_p_blue 阅读(175) 评论(0) 收藏举报