不加$watch好像{{ b }} 值没变化？

hamimelon2020

已于 2022-02-19 13:54:04 修改

阅读量185

点赞数

分类专栏： vue JavaScript

于 2022-02-19 13:51:50 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123017577

版权

Vue.js $watch 数据绑定实时更新回调函数

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

628 篇文章 6 订阅

订阅专栏

不加$watch好像{{ b }} 值没变化？

<!DOCTYPE html>
<html>
	<div id="app">
        <div>
            <input type="number" v-model="a">
            {{a}}
            <input type="number" v-model="b">
            {{b}}
            <input type="number" v-model="c">
            {{c.d}}
            <input type="number" v-model="d">
            {{c.e}}


            {{a}}

            b
            {{ b }}

          </div>

	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return {
                   a: 1,
                   b: 2,
                   c: {
                       d: 3,
                       e: 4
                   }
               }
           }
        }).mount('#app')
 
</script>
</html>

加了以后，好像是有变化。

<!DOCTYPE html>
<html>
	<div id="app">
        <div>
            <input type="number" v-model="a">
            {{a}}
            <input type="number" v-model="b">
            {{b}}
            <input type="number" v-model="c">
            {{c.d}}
            <input type="number" v-model="d">
            {{c.e}}

            a
            {{a}}

            b
            {{ b }}

          </div>

	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return {
                   a: 1,
                   b: 2,
                   c: {
                       d: 3,
                       e: 4
                   }
               }
           },
           created() {
               this.$watch('a', (newVal, oldVal) => {
               })

               this.$watch(
                   () => this.a + this.b,
                   (newVal, oldVal) => {

                   }
               )
           }
        }).mount('#app')
 
</script>
</html>

也有变化，不知道$watch有什么用？

<!DOCTYPE html>
<html>
	<div id="app">
        <div>
            <input type="number" v-model="a">
            {{a}}
            <input type="number" v-model="b">
            {{b}}
            <input type="number" v-model="c">
            {{c.d}}
            <input type="number" v-model="d">
            {{c.e}}
            </div>
            <div>
            a
            {{a}}

            b
            {{ b }}

          </div>

	</div>
	
	<script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return {
                   a: 1,
                   b: 2,
                   c: {
                       d: 3,
                       e: 4
                   }
               }
           }
        }).mount('#app')
 
</script>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不加$watch好像{{ b }} 值没变化？

不加$watch好像{{ b }} 值没变化？<!DOCTYPE html><html> <div id="app"> <div> <input type="number" v-model="a"> {{a}} <input type="number" v-model="b"> {{b}} &lt
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。