【Vue】监视（侦测）属性Watch用法的完整示例代码

已于 2022-02-21 15:05:19 修改
阅读量753 收藏 1
点赞数
分类专栏： 26.【Vue】 文章标签： vue.js 前端 javascript
于 2022-02-21 14:21:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxnn520/article/details/123046399
版权

 一、简单标准的用法

 

watch最简单的用法


            watch: {
                weather(newValue, oldValue){
                    console.log("简写版的weather的值改变了", newValue, oldValue);
                }
            }

 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>

<body>

    <div id="root">


        <h2>今天的天气是：{{name}}</h2>

        <button @click="change">点击切换</button>

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        var root = new Vue({

            el: '#root',
            data: { weather: true },
            computed: {
                name() {
                    return this.weather ? "晴天" : "下雨";
                }
            },
            methods: {
                change() {

                    this.weather = !this.weather
                }
            },

            watch: {
                weather: {

                    immediate:true, // 初始化时让handler调用一下
                    handler(newValue,oldValue){
                    // newValue:改变后的新值
                    // oldValue:改变前的旧值
                    console.log("weather天气改变了",newValue,oldValue);
                    }

                }
            },

        })
    </script>
</body>

</html>

二、在root(Vue)结构之外调用watch用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>

<body>

    <div id="root">


        <h2>今天的天气是：{{name}}</h2>

        <button @click="change">点击切换</button>

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        var root = new Vue({

            el: '#root',
            data: { weather: true },
            computed: {
                name() {
                    return this.weather ? "晴天" : "下雨";
                }
            },
            methods: {
                change() {

                    this.weather = !this.weather
                }
            },
        })


        // 在root(Vue)结构之外调用watch
        root.$watch('weather', {
                

                    immediate:true, // 初始化时让handler调用一下
                    handler(newValue,oldValue){
                    // newValue:改变后的新值
                    // oldValue:改变前的旧值
                    console.log("weather天气改变了",newValue,oldValue);
                    }
                }
            )

    </script>
</body>

</html>

三、对DATA数组中的具体值的深度监视实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>

<body>

    <div id="root">


        <h2>今天的天气是：{{name}}</h2>

        <button @click="change">点击切换</button>

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        var root = new Vue({

            el: '#root',
            data: {
                weather: true,
                numbers: { a: "1", b: "2" }
            },
            computed: {
                name() {
                    return this.weather ? "晴天" : "下雨";
                }
            },
            methods: {
                change() {
                    this.numbers.a = "8";
                    this.weather = !this.weather;
                }
            },
            watch: {
                'numbers.a':{
                    immediate: true, // 初始化时让handler调用一下
                    handler(newValue, oldValue) {
                    // deep:true,// 深度监视
                    // newValue:改变后的新值
                    // oldValue:改变前的旧值            
                    console.log("a的值改变了", newValue, oldValue);
                     }
                }
            }
            
        })


    </script>
</body>

</html>

敦厚的曹操
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vuejs中的watch实例详解(监听者)
10-15
本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue2 监听属性改变watch的实例代码
12-29
代码： 幼儿园入学年龄（3～6）：</label><input type=number v-model=child.age> <button @click=older> + </button> <button @click=younger> - </button> <p v-show=hasErr>{{...
vue实例的watch选项
richest_qi的博客
05-06 189
文章目录watch选项回调函数handlerwatch的简写形式监听多级结构的某个属性的变化deep参数，监听多级结构的所有属性的变化immediate参数相关链接 watch选项 回调函数handler <body> <div id="root"> <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2> <button @click="isHot=!isHot">切换天气</button&
vue中watch的实战用法
weixin_44251396的博客
01-06 338
Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。 如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。 1.简单用法，监听data里面的数据 下面这个就浅显易懂了，通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。 <template> <div> &lt...
vue中watch小案例
weixin_49199038的博客
09-18 133
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=
Vue里面watch的使用案例
David的博客
04-01 752
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>V-model</title> <script src="https://cdn.jsdelivr.net/npm/vue"></sc...
vue计算属性computed的使用方法示例
12-09
本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些...
vue组件watch属性实例讲解
12-29
本文实例为大家分享了vue组件watch属性的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset=UTF-8> <title>wacth属性</title> [removed]...
Vue.js watch监视属性知识点总结
10-16
在本篇文章里小编给大家分享的是关于Vue.js watch监视属性的相关知识点内容，需要的朋友们学习下。
Vue 2.0 侦听器 watch属性代码详解
12-12
官网介绍的很好理解了，也就是监听一个数据的变化，当该数据变化时执行我们的watch方法,watch选项是一个对象，键为需要观察的表达式(函数),还可以是一个对象，可以包含如下几个属性:  handler ;对应的函数 ;可以...
$watch和watch属性的使用
weixin_30362801的博客
05-16 917
$watch和watch属性都是监听值的变化的,是同一个作用，但是有两个不同写法。 用法一： this.$watch((newVal,oldVal)=>{ }) 注意：这种方法是监听不到对象的变化的。 用法二： watch:{ xxx：（newVal,oldVal)=>{ // xxx是data里的数据 } }...
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
大前端
08-16 7294
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
watch命令及使用例子
无尽星空--帝王铠
11-20 530
watch是一个非常实用的命令，基本所有的Linux发行版都带有这个小工具，如同名字一样，watch可以帮你监测一个命令的运行结果，省得你一遍遍的手动运行。在Linux下，watch是周期性的执行下个程序，并全屏显示执行结果。你可以拿他来监测你想要的一切命令的结果变化，比如 tail 一个 log 文件，ls 监测某个文件的大小变化，看你的想象力了！1．命令格式：watch[参数][命令]2．命令功
VueJs探索之watch用法详解
热门推荐
itKingOne的博客
04-07 10万+
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。 var vm = new Vue( { el: '#app', data: { childrens:
Vue中watch的简单应用
李昱成的专栏
01-28 280
Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。 如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。 下面写两个demo，参考demo来了解一下 demo1 <template> <div> <el-input v-model="demo"></el-input> {{value}} </div> </template> &lt.
Vue中computed和watch示例区别
明知山
03-14 189
computed示例 <template> <div class="box"> <input type="text" v-model="keyCode" placeholder="筛选" /> <ul> <li v-for="(item, index) in filterCode" :key="index">{{ item }}</li> </ul> </div> &l
APP了 Watch的简单代码
weixin_30848775的博客
05-31 73
---恢复内容开始--- 1.在WatchKit App的storyboard里拖入控件,需要多个控件时,放在group上 2.界面跳转有三种方式push/pop,present/dismiss,next page(类似page control) 3.主视图为分页控制器的时候,无法push分级视图,主视图为分级控制器是,无法push分页视图 4.Watch的table 必须...
vue2组件通信(七)——任意组件$root
浪头的博客
04-20 1147
vue项目中，所有组件实例身上都有一个$root属性，它们指向整个项目的根组件，一般也就是App，在它们自己组件实例身上有一个$root属性指向它们共同的根组件，专栏中在全局事件总线那一篇博客介绍了vue组件身上有$on,$emit,$off三个api。 实现消息发布与订阅模式，实际上这和$parent一样，也是消息发布与订阅模式，不过在这里中间人是它们的根元素。 // 接收数据组件 methods: { btn(){ this.$root.$off("hello")
watch
一心一意码代码
10-09 274
watch了解更多详细一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在**实例化时调用 $watch()**，遍历 watch 对象的每一个属性。示例var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { a: function (val, o
vue watch使用示例代码
最新发布
04-07
我可以回答这个问题。以下是一个 Vue 中使用 watch 的示例代码： ```javascript export default { data() { return { message: 'Hello, World!', messageCount: 0 } }, watch: { message(newVal) { console.log(`The message has changed to: ${newVal}`) this.messageCount++ } } } ``` 在上面的代码中，我们定义了一个名为 `message` 的 data 属性，并且定义了一个名为 `messageCount` 的计算属性。在 `watch` 中，我们监听了 `message` 的变化，并且在 `message` 发生变化时，我们会在控制台中输出新的 `message` 值，并且将 `messageCount` 加一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值