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>