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" @keyup="getFullName"> + 13 <input type="text" v-model="lastName" @keyup="getFullName"> = 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 getFullName(){ 26 this.fullName = this.firstName + '-' + this.lastName 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>