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>