vue计算属性与属性的监视
vue计算属性与属性的监视
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
姓：<input type="text" placeholder="xing" v-model="xing" /><br />
名：<input type="text" placeholder="ming" v-model="ming"/><br />
姓名1（单向）<input type="text" placeholder="xingming1" v-model="xingming1"/><br />
姓名2（单向）<input type="text" placeholder="xingming2" v-model="xingming2"/><br />
姓名3（双向）<input type="text" placeholder="xingming3" v-model="xingming3"/>
<h1>计算属性存在缓存</h1>
{{xingming1}}<br />
{{xingming1}}
</div>
<script>
var v=new Vue({
el:'#app',
data:{
xing:'1',
ming:'2',
xingming2:''
},
//计算属性
//什么时候执行：初始化回执行，当相关属性值发生变化的时候回执行
computed:{
xingming1(){
console.log("xingming1()");
return this.xing + " " + this.ming
},
//这是一个属性
xingming3:{
//当需要读取当前属性值的时候调用
get(){
return this.xing + " " + this.ming
},
//当当前属性值发生改变的时候调用
set(val){
var xm=val.split(" ");
this.xing=xm[0];
this.ming=xm[1];
}
}
},
//监视
//监视某一个属性的变化
watch:{
xing : function(newVal,oldVal){
this.xingming2=newVal+" "+this.ming
}
}
})
//监视的第二种写法
v.$watch("ming",function(value){
this.xingming2=this.xing+" "+value;
})
</script>
</body>
</html>
fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。