9.Vue.js 监听属性

vue

本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化。

以下实例通过使用 watch 实现计数器:

<div id = "app">

<p style = "font-size:25px;">计数器: {{ counter }}</p>

<button @click = "counter++" style = "font-size:25px;">点我</button>

</div>

<script type = "text/javascript">

var vm = new Vue({

el: '#app',

data: {

counter: 1

}

});
//oval为当前值

vm.$watch('counter', function(nval, oval) {

alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

});

</script>

以下实例进行千米与米之间的换算:

<div id = "computed_props">

千米 : <input type = "text" v-model = "kilometers">

米 : <input type = "text" v-model = "meters">

</div>

<p ></p>

<script type = "text/javascript">

var vm = new Vue({

el: '#computed_props',

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 是一个实例方法

vm.$watch('kilometers', function (newValue, oldValue) {

// 这个回调将在 vm.kilometers 改变后调用

document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;

})

</script>

以上是 9.Vue.js 监听属性 的全部内容, 来源链接: utcz.com/z/380190.html

回到顶部