Vue-computed & watch
computed:{//此属性，是由其他data同步计算而来。
//1.参与运算的data发生变化时，computed中的属性要重新计算。 //2.同一环境（运行上下文）时，多次调用同一个computed中的属性， //只计算一次，之后的调研，直接使用第一次计算的结果。} //3.通过set，get函数，实现值得双向变动显示。 watch:{//Tips基础data变化时，执行相应的函数和异步操作，无返回值。} <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
//1.参与运算的data发生变化时，computed中的属性要重新计算。 //2.同一环境（运行上下文）时，多次调用同一个computed中的属性， //只计算一次，之后的调研，直接使用第一次计算的结果。} //3.通过set，get函数，实现值得双向变动显示。 watch:{//Tips基础data变化时，执行相应的函数和异步操作，无返回值。} <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head><body>
<div id="app">
<ol>
<ul v-for="l in ListTips">{{l}}</ul>
</ol>
name:<input type="text" v-model:value="name"> desc: <input type="text" name="desc" id="desc" v-model:value="desc">
<button v-on:click="addTip">add Tip</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {//base data
Tips:[
{name:"{{}}",desc:"{{Vue special tag}}"}
,{name:"new Vue",desc:"var vm = new Vue()"}
,{name:"<div id=''>",desc:"DOM element id."}
,{name:"#app",desc:"# is special tag, app is element id."}
,{name:"data",desc:"vm.data is a property."}
],
name:""
,desc:""
},
methods:{//normal function
addTip:function(event){
var newTip = {name:this.name,desc:this.desc};
this.Tips.push(newTip);
}
}
},
,
watch:{//Tips基础data变化时，执行相应的函数和异步操作，无返回值。
Tips:function(event){
var m = this;
setTimeout(function(){//异步操作
alert(m.name);
},500);
}
computed:{ //此属性，是由其他data同步计算而来。
//1.参与运算的data发生变化时，computed中的属性要重新计算。 //2.同一环境（运行上下文）时，多次调用同一个computed中的属性，
//只计算一次，之后的调研，直接使用第一次计算的结果。 //3.通过set，get函数，实现值得双向变动显示。
//1.参与运算的data发生变化时，computed中的属性要重新计算。 //2.同一环境（运行上下文）时，多次调用同一个computed中的属性，
//只计算一次，之后的调研，直接使用第一次计算的结果。 //3.通过set，get函数，实现值得双向变动显示。
ListTips:function(){
var ar= Object.keys(this.Tips[0]);
return this.Tips.map(function(t){
var s ="";
for(var i=0;i<ar.length;i++){
s+= ar[i]+" : "+ t[ar[i]]+" =====";
}return s;
});}}}
fullName:{ get:function(){return this.lastName+" "+ this.firstName;}
,set:function(newValue){ var ar=newValue.split(" "); this.lastName=ar[0];this.firstName=ar[1]}
}
);
//alert(vm.msg);
</script>
</body>
</html>
评论
发表评论