<!-- html部分--> <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <!-- 这样写不好,这样是模板逻辑变得厚重,不易维护 --> <div>全名:{{firstName + lastName}}</div> <!-- 使用computed计算属性--> <div>全名:{{fullName}}</div> </div> <!--js部分--> var vm = new Vue({ el: '#app', data: { firstName: '', lastName: '' }, // 创建计算属性通过computed关键字,它是一个对象 // 计算属性是基于它们的依赖进行缓存的 computed: { // 这里fullName就是一个计算属性,它是一个函数,但这个函数可以当成属性来使用 fullName () { return this.firstName + this.lastName } } })