! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title 计算属性与监听器 / title script src ="Vue.js" / script / head body div id ="root" 姓： input v-model ="firstName" / 名： input v-model ="lastName" / div {{Name}} /
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性与监听器</title> <script src="Vue.js"></script> </head> <body> <div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{Name}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data:{ firstName:"", lastName:"", count:0 }, <!--computed比较适合对多个变量或者对象进行处理后返回一个结果值， 也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化， 举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。 这里的这个总金额使用computed属性来进行计算是最好的选择--> computed:{ Name:function () { return this.firstName+this.lastName; } }, <!--watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象--> watch:{ /*firstName:function () { this.count++; }, lastName: function() { this.count++; }*/ Name:function () { this.count++; } } }) </script> </body> </html>