Vue 计算属性 和监听属性

计算属性

<div id="app"> //一般情况的写发的写法 <h1>{{num1+num2}}</h1> // 计算属性 <h1>{{sum}} </h1> <p>{{msg2}}</p> //msg2 默认是 ABCD 但是通过计算属性的值 他变的排序倒过来了 // 但是 getMsg 的set 设置了 当 getMsg 发生变化时 他会得到 val 值然后 val的值就会 是被 get 设置成翻转的 翻转的然后在翻转回来 大概就是这样 这里我可能解释的不太明白 但是 就是这样的 <p>{{getMsg}}</p> </div> <script> var app=new Vue({ el:'#app', data:(){ return{ msg2:"ABCD", suts:[{ Name:"001", age:18, sex:男 }, { Name:"002", age:19, sex:女 }, { Name:"003", age:20, sex:女 }, { Name:"004", age:21, sex:女 },] } }, watch：{ msg2:function(val){ console.log("我msg2改变成"+val) //这是个监听属性 不建议多用 可以适当的时候用 // 底下 计算数据的 set get 也可以监听到数据的变化从而根据变化给出不同的结果 } } computed:{ getStu:function(){ var res=this.stus.filter((item,i)=>{ return item.age%2==0; }) // 这个函数就可以实现 age 是双数的学生 return res } getMsg:{ get:function(){ return this.msg2.split('').resvers('').jion('') //获取然后翻转 set:function(val){ // 设置 翻转 return this.msg2=val.split('').resvers().jion('') // 然后此时的计算属性是变回正的 } } } } }) </script>