1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 分析：监听到文本框数据的改变，这样才知道 什么时候拼接出一个 fullName 10 @keyup 监听文本框数据的变化--> 11 <div id="app"> 12 <input type="text" v-model="firstName"> + 13 <input type="text" v-model="lastName"> = 14 <input type="text" v-model="fullName"> 15 </div> 16 <script> 17 const vm = new Vue({ 18 el:'#app', 19 data:{ 20 firstName:'', 21 lastName:'', 22 // fullName:'' 23 }, 24 methods:{}, 25 computed:{ 26 // 在computed 中，可以定义一些属性，这些属性叫作计算属性，计算属性的本质，就是一个方法 27 // 只不过在使用这些计算属性时，是把它们的名称直接当作属性来使用，并不会把这些计算属性当作方法去调用 28 // 注意： 计算属性在引用的时候不要加括号，直接当作普通属性使用 29 // 只要计算属性这个function 内部所用到的任何data中的数据发生变化，就会重新计算这个计算属性的值 30 // 计算属性的求值结果会被缓存起来方便下次直接使用；如果计算属性方法中，所有原来的任何数据都没有发生过变化，则不会重新对计算属性求值 31 'fullName':function () { 32 return this.firstName + this.lastName 33 } 34 } 35 }) 36 </script> 37 </body> 38 </html>