一、计算属性computed的使用 JS每一个属性都有两个对应的方法——get和set，都是回调函数 get：返回当前属性的值 set：监视，一旦改变属性值就会调用set 代码及解释如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue test</title> <script src="./js/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="div"> first::<input type="text" v-model="first"/><br> last::<input type="text" v-model="last"/><br> all_1::<input type="text" v-model="all1"/><br> all_2::<input type="text" v-model="all2"/><br> all_3::<input type="text" v-model="all3" /><br> </div> <script src="./js/vue.js" type="text/javascript"></script> <script type="text/javascript"> const vue = new Vue({ el : '#div', //声明被作用的element data : { // 数据 first : 'first', last : 'last', all2 : 'first last' }, computed : { // 计算属性 ，与data类似，是个对象 all1(){ //计算结果的key为all1，默认为计算属性中的get方法，方法的返回值就是属性值 return this.first+" "+this.last; // 计算first和last的结果的值，写在内存中 }, all3 : { //计算结果的key为all1，是个对象，编写all3对象的set方法和get方法 get(){ //获取值的回调函数 console.log("获取all3"); return this.first + " " + this.last; }, set(value){ //监视的回调函数 console.log("改变all3"); const item = value.split(" "); this.first = item[0]; this.last = item[1]; } } } }); vue.$watch('last',function (value,old) { //这里是watch属性的一种写法 this.all2 = this.first + " " + value; }) </script> </body> </html>这里是一些错误： ①在data中不能计算 可以很明显的看出来在data属性中不能进行计算，计算完之后all2不是一个数字 ②all1中没有写set函数，改变all1的值会报错 很明显提示 no setter ， 为了能在all3中改变数值使first，last也发生改变，all3这样声明：
all3 : { //计算结果的key为all1，是个对象，编写all3对象的set方法和get方法 get(){ //获取值的回调函数 console.log("获取all3"); return this.first + " " + this.last; //更新all3 }, set(value){ //监视的回调函数 console.log("改变all3"); const item = value.split(" "); //分割出新的first ， last this.first = item[0]; //更新first this.last = item[1]; // 更新last } }all3在计算属性中，每次data中的值改变，计算属性中的值都要重新获得一遍（执行get函数） 如果all3改变，就要执行监视的回调函数（执行set函数）
二、监视属性watch的使用 监视，顾名思义，就是对数值进行监视，如果发生改变就执行 watch 的设置有两种方式 ①可以在Vue的初始化是进行参数配置（和data,computed类似），如
watch : { first : function (val , old) { // 冒号前面是被监听的变量，val 是改变后的值，old是改变前的 ，old可以不写在参数中 this.all2 = val + " " + this.last; // 作用 ： first值改变，只更新all2变量中的frist的值 } }②调用vue对象的$watch方法
vue.$watch('last',function (value,old) { // 第一个参数是被监视的变量 ，第二个参数是回调函数 this.all2 = this.first + " " + value; // 作用 ： last值改变，只更新all2变量中的last的值 })三、强制绑定 强制绑定的对象一般都是标签中的属性，如class，id等 使用方法是在要强制绑定的属性前加":",如":class",":id"等 强制绑定的应用环境是：如果代码这样写
<body> <div id="div"> <p class="first_style">{{first}}</p> // 这里，我要的first_style中的值，但是它识别到的是 first_style这个样式 <p class="last_style">{{last}}</p> // 这里，我要的last_style中的值，但是它识别到的是 last_style这个样式 </div> <script src="./js/vue.js" type="text/javascript"></script> <script type="text/javascript"> const vue = new Vue({ el : '#div', data : { first : 'first', last : 'last', first_style : 'red', last_style : 'blue' } }); </script> </body>使用强制数据绑定之后
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue test</title> <script src="./js/jquery.min.js" type="text/javascript"></script> <style> .red{ color : red ; } .blue{ color : blue; } </style> </head> <body> <div id="div"> <p :class="first_style">{{first}}</p> //强制寻找vue对象中first_style变量的值 <p :class="last_style">{{last}}</p>//强制寻找vue对象中last_style变量的值 </div> <script src="./js/vue.js" type="text/javascript"></script> <script type="text/javascript"> const vue = new Vue({ el : '#div', data : { first : 'first', last : 'last', first_style : 'red', last_style : 'blue' } }); </script> </body> </html>结果：
