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

时间:2019-06-12
本文章向大家介绍第八章 watch监听 85 computed-计算属性的使用和3个特点,主要包括第八章 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>

 

$flag 上一页 下一页