9.Vue2-监听属性的用法
题记
vue2监听属性的用法
计数器
使用watch实现计数器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<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}});vm.$watch('counter', function(nval, oval) {alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});
</script>
</body>
</html>千米与米的换算
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>实例</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head><body><div id = "computed_props">千米 : <input type = "text" v-model = "kilometers">米 : <input type = "text" v-model = "meters"></div><p id="info"></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></body>
</html>后记
觉得有用可以点赞或收藏！