<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="middlename">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> <p>{{fullname}}</p> <p>{{fullname}}</p> <p>{{fullname}}</p> <!-- 只输出一次'ok' --> </div> <script> //创建Vue实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', middlename:'' }, methods: {}, computed:{ //在computed中，可以定义一些属性，这些属性叫做计算属性。计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候，是把他们的名字直接当作属性来使用的；并不会把计算属性当作方法去调用 //注意1：计算属性在引用时候，一定不能加小括号()去调用，直接把他当作普通属性去使用就好了 //注意2：只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值 //注意3：计算属性的求值结果会被缓存起来，方便下次直接使用(提高运行效率)，如果计算属性中所依赖的任何数据，都没有发生过变化，则 不会被重新对计算属性求值。 'fullname':function(){ console.log('ok'); return this.firstname + '-' + this.middlename + '-' + this.lastname; } } }); </script> </body> </html>