监视器使用方法
<template>
<div class="watchAndComputed">
<h1 v-text="watchAndComputedTitle"></h1>
<input v-model="watchAndComputedText"/>
<button @click="changeArrayLsit">改变实体数据</button>
<span>新数据:{{watchNew}} 老数据:{{watchOld}}</span>
<hr/>
<input v-model="n1"/>+<input v-model="n2"/>*<input v-model="rate"/> = {{resultComputed}}
</div>
</template>
<script>
let vm ;
export default {
name: 'watchAndComputed',
data() {
vm = this;
return {
watchAndComputedTitle: 'vue监视用法',
watchAndComputedText:'1',
watchNew:'1',
watchOld:'1',
arrayList: [
{
"code": "1",
"value": "北京市"
},
{
"code": "2",
"value": "上海市"
},
{
"code": "3",
"value": "广州市"
},
{
"code": "4",
"value": "深圳市"
},
{
"code": "5",
"value": "杭州市"
},
{
"code": "6",
"value": "天津市"
},
{
"code": "7",
"value": "西安市"
},
{
"code": "8",
"value": "武汉市"
},
{
"code": "9",
"value": "长沙市"
}
],
n1:'',
n2:'',
rate:'',
}
},
methods:{
changeArrayLsit:function(){
console.log(vm.arrayList);
for(let b of vm.arrayList){
b.code +="code";
}
}
},
/*
单个的监听
*/
watch:{
arrayList: {
deep: true,
handler: function (newV, oldV) {
vm.watchAndComputedText = Number(vm.watchAndComputedText)+1;
console.log(newV, oldV);
}
},
watchAndComputedText:function(newV,oldV){
vm.watchNew = newV;
vm.watchOld = oldV;
}
},
computed:{
resultComputed:function(){
return (Number(vm.n1)+Number(vm.n2))*Number(vm.rate);
}
}
}
</script>
监视器主要就是熟练的使用,在这里展示出来一个例子,一个是文本框里面的基本书记类型新老数据变化一个是复杂数据类型的变化,一个是监控多个的变化,具体结果如下图所示: