VUE学习：vue基础17————监听器

最新推荐文章于 2024-06-28 11:31:39 发布

北凉冬

最新推荐文章于 2024-06-28 11:31:39 发布

阅读量108

点赞数 1

分类专栏： vue.js 新星计划文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117200919

版权

vue.js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

新星计划

15 篇文章 0 订阅

订阅专栏

提示：
VUE学习：VUE学习：vue基础17————监听器

VUE学习：vue基础17————监听器

前言
监听器

前言

本文继续学习Vue相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考

监听器

监听器：在监听器中设置需要被监听的属性，被监听的属性的值只要发生变化，监听器就会自动调用

被监听的属性必须是data中的某个值，也就是说watch对象中属性名必须存在于data中，否则无效

<body>
<div id="app">
   <input type="text" v-model="msg1">
   <p>{{msg1}}</p>
   <p>{{msg2}}</p>
</div>
</body>
<script>

   let vm = new Vue({
      el: "#app",
      data: {
         msg1:"hello world",
         msg2:"",
      },
      watch:{
         /*被监听的属性必须是data中的某个值，也就是说watch对象中属性名必须存在于data中，否则无效*/
         msg1:function (newVal,oldVal) {
            /*只要msg1的值发生变化，该函数就会自动被触发执行，得到两个结果：更改后的值和更改前的值*/
            console.log(`更新后的msg1是${newVal}`);
            console.log(`更新前的msg1是${oldVal}`);
            this.msg2=newVal;
         },
      }
   });
</script>

只要msg1的值发生变化，该函数就会自动被触发执行，得到两个结果：更改后的值和更改前的值

计时器实现异步代码

<body>
<div id="app">
   <p>{{msg3}}</p>
   <button type="button" @click="change">change</button>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         msg3:"你过来啊"
      },
      methods: {
         change(){
            setTimeout( ()=> {
               this.msg3="我不去~！";
            },5000);
         }
      },
      watch:{
         msg3(val){
            alert(`msg3被更新，结果为：${val}`);
         }
      }
   });
</script>

北凉冬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
VUE学习：vue基础17————监听器

提示：VUE学习：VUE学习：vue基础17————监听器VUE学习：vue基础17————监听器前言监听器前言本文继续学习Vue相关内容。提示：以下是本篇文章正文内容，下面案例可供参考# 表单元素的事件绑定问题监听器监听器：在监听器中设置需要被监听的属性，被监听的属性的值只要发生变化，监听器就会自动调用被监听的属性必须是data中的某个值，也就是说watch对象中属性名必须存在于data中，否则无效<body><div id="app"> <in
复制链接

扫一扫

专栏目录