13.侦听属性 ---(vue入门文档学习记录)

╰+攻爆jí腚メ 2021-12-16 09:43 217阅读 0赞

**侦听属性**

先看下面的例子:

<div id="computed_props">
    			千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
    		</div>
    		<script>
    			var vm = new Vue({ 
    				el: '#computed_props',
    				data: { 
    					kilometers: 1,
    					meters: 0
    				},
    				methods: { },
    				computed: { },
    				watch: { 
    					kilometers: function(val) { 
    						this.kilometers = val;
    						this.meters = val * 1000;
    					},
    					meters: function(val) { 
    						this.kilometers = val / 1000;
    						this.meters = val;
    						console.log(vm.meters)
    					}
    				}
    			});

我们可以看到:直接改变源码中kilometers的值watch是不起作用的,一旦页面上开始修改,则watch开始工作,这就表明watch第一次不执行.  
注意：  
Vue实例中调用属性值得时候必须要加this.否则不会生效的，之前遇到过的一个坑特此记录。  
思考:  
怎样使watch第一次也执行呢?找了一些文章觉得挺好,可以去看一下,通过绑定handle即可.[https://blog.csdn.net/m0\_37970699/article/details/94742994][https_blog.csdn.net_m0_37970699_article_details_94742994]

[https_blog.csdn.net_m0_37970699_article_details_94742994]: https://blog.csdn.net/m0_37970699/article/details/94742994

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 侦听属性

简介构造器的 watch 选项，用于定义 Vue 实例的侦听属性。侦听属性可以用来观察和响应 Vue 实例上的数据变动。当你有一些数据需要随着其它数据变动而...

阳光穿透心脏的1/2处/ 2024年04月18日 16:57/ 0 赞/ 17 阅读

相关 Vue的计算属性、侦听属性与过滤器解析

文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对

淩亂°似流年/ 2024年03月26日 12:09/ 0 赞/ 5 阅读

相关 vue模板语法、计算属性、侦听属性

一、模板语法 1、插值 1）、文本数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>{ {

逃离我推掉我的手/ 2023年07月13日 12:14/ 0 赞/ 77 阅读

相关 vue 侦听watch

vue侦听属性watch 侦听的数据发生改变是触发该函数分为普通侦听：侦听普通数据类型发生改变深度侦听：侦听引用类型数据发生改变普通侦听 n

布满荆棘的人生/ 2022年11月29日 12:13/ 0 赞/ 128 阅读

相关计算属性缓存 vs 方法vswatch侦听属性

故心故心故心故心小故冲啊 -------------------- 文章目录计算属性缓存 vs 方法计算属性 vs 侦听属性不同点总

水深无声/ 2022年11月02日 11:41/ 0 赞/ 150 阅读

相关 Vue中的计算属性（computed）与侦听属性（Watch）

computed计算属性：当依赖的属性的值发生变化时，计算属性会重新计算，否则使用缓存中的属性值。功能：双向绑定、缓存值、分离逻辑基本用法： `computed:

喜欢ヅ旅行/ 2022年10月01日 13:51/ 0 赞/ 177 阅读

相关 Vue学习笔记（二）——比较计算属性和侦听属性

参考文档：[https://cn.vuejs.org/v2/guide/computed.html][https_cn.vuejs.org_v2_guide_computed.

忘是亡心i/ 2022年03月17日 02:46/ 0 赞/ 218 阅读

相关 13.侦听属性 ---(vue入门文档学习记录)

侦听属性先看下面的例子: <div id="computed_props"> 千米 : <input type="text" v-model="ki

╰+攻爆jí腚メ/ 2021年12月16日 09:43/ 0 赞/ 218 阅读

相关 14.侦听属性进阶 ---(vue入门文档学习记录)

假设有如下代码： <div> <p>FullName: { {fullName}}</p> <p>FirstNa

谁践踏了优雅/ 2021年12月16日 09:35/ 0 赞/ 188 阅读

相关 Vue中计算属性computed和侦听属性watch的区别

Vue中计算属性computed和侦听属性watch的区别 1、计算属性：computed （1）使用场景：模板中的表达式常用于简单的运算，当模板中的表达式过长或者

水深无声/ 2021年09月07日 06:13/ 0 赞/ 410 阅读