<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p style="font-size:25px;">计数器:{{counter}}</p>
<button @click="counter++" style="font-size:25px;">点我</button>
</div>
<div id="computed_propos">
千米:<input type="text" v-model="kilometers" />
米:<input type="text" v-model="meters" />
<p id="info"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化:' + oval + '变为' + nval + '!');
});
var v = new Vue({
el: '#computed_propos',
data: {
kilometers: 0,
meters: 0
},
methods: {},
computed: {},
watch: {
kilometers: function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters: function(val) {
this.kilometers = val / 1000;
this.meters = val;
}
}
})
// $watch 是一个实例方法
v.$watch('kilometers', function(newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById("info").innerHTML = "修改前值为:" + oldValue + ",修改后值为:" + newValue;
})
</script>
</body>
</html>
Vue监听属性
最新推荐文章于 2024-07-07 06:59:05 发布