VueJs之判断与循环监听

最新推荐文章于 2023-09-12 15:41:36 发布

转载最新推荐文章于 2023-09-12 15:41:36 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/assistants/p/10302514.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何在Vue.js中使用watch特性实现双向数据绑定，通过实例展示了当输入框内的千米值变化时，如何自动更新对应的米值，反之亦然。这不仅加深了对Vue数据响应机制的理解，还提供了实际的代码示例供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>