VueJs之判断与循环监听

watch 会实时监听数据变化并改变自身的值

 1 <div id = "computed_props">
 2          千米 : <input type = "text" v-model = "kilometers">
 3          米 : <input type = "text" v-model = "meters">
 4       </div>
 5        <p id="info"></p>
 6       <script type = "text/javascript">
 7          var vm = new Vue({
 8             el: '#computed_props',
 9             data: {
10                kilometers : 0,
11                meters:0
12             },
13             methods: {
14             },
15             computed :{
16             },
17             watch : {
18                kilometers:function(val) {
19                   this.kilometers = val;
20                   this.meters = val * 1000;
21                },
22                meters : function (val) {
23                   this.kilometers = val/ 1000;
24                   this.meters = val;
25                }
26             }
27          });
28          // $watch 是一个实例方法
29         vm.$watch('kilometers', function (newValue, oldValue) {
30             // 这个回调将在 vm.kilometers 改变后调用
31             document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
32         })
33       </script>

 

posted @ 2019-01-22 10:46  闻长歌而知雅意  阅读(968)  评论(0)  编辑  收藏  举报