<! DOCTYPE HTML> <HTML lang = "EN"> <head> <Meta charset = "UTF-. 8"> <Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0"> < HTTP-equiv = Meta "X--the UA-Compatible" Content = "IE = Edge"> <title> the Document </ title> <Script the src = "./ lib / VUE-2.4.0.js"> </ Script> </ head> <body> <div the above mentioned id = "App"> <- analysis:! -> <! - 1. we want to listen to the text box to change the data, so as to know when to piece together a fullname -> <! - 2. how to monitor data changes in the text box it? ? ? -> <INPUT type = "text" = V-Model "FirstName" @ keyUp = "GetFullName"> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } } }); </script> </body> </html>
<!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="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> </div> <script> '#app' EL:Vue ({new new=VMvarCreate Vue instance, to give the ViewModel// , Data: { FirstName: '' , LastName: '' , FullName: '' }, Methods: {}, watch: { // use this property, can monitor the change in data specified in the data, then this triggers a corresponding watch function handler ' firstname ' : function (newVal, oldVal) { // the console.log ( 'monitored the change in the firstname') // this.fullname = this.firstname + '-' + this.lastname // the console.log (+ newVal '---' + oldVal) the this .fullname = newVal + '-' + this.lastname }, 'lastname': function (newVal) { this.fullname = this.firstname + '-' + newVal } } }); </script> </body> </html>