Vue.js系列教材（八）- vue.js 通过watch 监听属性变化

Vue.js系列教材（七）- vue.js 计算属性 computed的用法举例

Vue.js系列教材（九）- 中使用过滤器

工具版本兼容问题

步骤 1 :

watch

edit 顶折

纠问

vue可以通过watch来监听属性值的变化。
这是一个计算人民币对美元汇率的例子

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: <input type="number" v-model.number = "dollar"   />
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0,
          dollar:0
      },
      watch:{
          rmb:function(val) {
              this.rmb = val;
              this.dollar = this.rmb / this.exchange; 
          },
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange; 
          },
      }
      
    })
     
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

Vue.js系列教材（七）- vue.js 计算属性 computed的用法举例

Vue.js系列教材（九）- 中使用过滤器

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2022-10-11 优化下代码，解决双向监听中自动触发刷新的问题

zbb1314520

关于前端部分-Vue.js-监听属性的提问

当人名币数值含很多位小数时，此时在进行删除操作时，还未删除完数据，由于存在双向监听，触发了更新事件，导致还未彻底改变完数值，由于美元监听到人名币改动，美元也发生了改动，此时人名币由于美元的改动也发生了改动。所以给人一种删除不尽，数据一直会变动的感觉。首先改动美元时亦然如此。解决方法，通过前面的内容，v-model.lazy ,在美元和人名币输入框使用懒加载即可。使用了懒加载后，数据刷新事件并不会在我们修改或者删除填写数据的过程中发生，当焦点离开输入框时，才会监听到数据更新触发更新事件。

<!DOCTYPE html>
<script src="https://how2j.cn/study/vue.min.js"></script>

<body>
    <style>
        table tr td {
            border: solid 1px black;
            padding: 10px;
        }

        table {
            border-collapse: collapse;
            width: 500px;
        }

        tr.headLine {
            background-color: lightseagreen;
        }
    </style>
    <div id="div1">
        <table>
            <tr>
                <td colspan=2 align="center">汇率：<input type="number" v-model="exchangeRate"><button
                        v-on:click="vm">应用</button></td>
            </tr>
            <tr class="headLine">
                <td>人民币</td>
                <td>美元</td>
            </tr>
            <tr>
                <td align="center">￥:<input type="number" v-model.lazy="chineseYuan"></td>
                <td align="center">$:<input type="number" v-model.lazy="dollar"></td>
            </tr>
        </table>

    </div>

</body>
<script>
    new Vue({
        el: "#div1",
        data: {
            // 默认汇率为1，初始化汇率为0时，0*任何数=0，当焦点离开人名币输入框时，触发了更新事件，由于美元*0=0对应的会将输入的人名币数据重置为0
            exchangeRate: 1,
            chineseYuan: 0,
            dollar: 0
        },
        // 更改汇率时并不会触发更新，所以手动添加一个通过按钮触发的更新方法
        methods: {
            vm: function () {
                this.dollar = this.chineseYuan / this.exchangeRate;
            }
        },
        watch: {
            chineseYuan: function (val) {
                this.chineseYuan = val;
                this.dollar = this.chineseYuan / this.exchangeRate;
            },
            dollar: function (val) {
                this.dollar = val;
                this.chineseYuan = this.dollar * this.exchangeRate;
            },
        }
    })
</script>

</html>

1 个答案

gkk
答案时间：2023-01-09

确实有这个问题，谢了兄弟，这个可能工作中也会遇到。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-04-29 watch代码块是怎么跑起来的啊，看不懂

up-bear

关于前端部分-Vue.js-监听属性的提问

写的两个函数我知道是传值计算的，但是搞不明白是怎么工作的，参数vai是什么鬼

watch:{
          rmb:function(val) {
              this.rmb = val;
              this.dollar = this.rmb / this.exchange;
          },
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange;
          },
      }

1 个答案

Buzzczars
答案时间：2021-08-30

参数val就是事件发生后，对应元素的新值

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-12-16 直观点。。。。。

2020-09-24 为啥要加this啊1，有this。rmb声明了=val，但另外两个在一个rmb方法里没声明啊！！

2020-09-11 $转￥

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 6 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Vue.js-监听属性的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图