<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> <body> <div id="root"> 姓：<input v-model="xing" /> 名：<input v-model="ming" /> <div>{{name}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data:{ //nmae不能写在这个里面 xing:"", ming:"", count:0 }, computed:{ //计算属性:当this.xing或this.ming改变时,将计算的结果赋值给name name:function(){ return this.xing+this.ming } }, watch:{ //侦听器:当name改变时,进行函数内部的操作 name:function(){ this.count=this.name.length } } }) </script> </body> </html>
