精华内容
下载资源
问答
  • 2021-12-28 11:02:04

    使用 watch 给数据添加事件监听,并设置 table 组件默认添加 loading ,当表格数据 categoriesList 渲染完成后实行 this.loading = false,取消 loading。可解决表格加载等待的问题。

    <Table
        v-loading="loading"
        :tableData="categoriesList">
    </Table>
    
    data () {
        return {
          loading: true,
          categoriesList: [],
        }
    }
    
    watch: {
        categoriesList: function () {
          var _this = this
          _this.$nextTick(function () {
            this.loading = false
          })
        }
      },
    
    更多相关内容
  • 本篇文章主要介绍了Vue监听数据变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实例如下: vm.$watch('某data数据',function(val){ ...以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • vue监听数据变化 watch

    千次阅读 2022-01-07 14:09:38
    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化。 watch的基本用法 在之前我们在js中添加了data、methods,这一次我们要添加的是watch属性。下面我们先来眼熟一下...

    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化。

    watch的基本用法

    在之前我们在js中添加了data、methods,这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置:

    <script>
    export default {
        name: "app",
        // 数据
        data() {
            return {};
        },
        // 方法
        methods:{},
        // 侦听器
        watch:{}
    };
    </script>
    
    

    一个简单的例子:

    <template>
        <p>你点击按钮的次数是: {{ count }} </p>
        <button @click="add" v-model="count">点击</button>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                count:0
            }
        },
        methods:{
            add(){
                this.count++;
            }
        },
        watch:{
            // 被侦听的变量count
            count(){
                console.log('count 发生了变化');
            }
        }
    };
    </script>
    
    

    侦听器更多的是用在异步操作中,所谓异步操作就是数据返回有所延迟的操作,比如说我们要请求后端的接口,接口会返回给我们数据,然后我们再将数据渲染在页面上。

    从请求接口到返回数据,这中间需要一定的时间,此时我们就可以用侦听器来侦听返回的数据,当数据返回以后,我们再触发渲染。

    模拟一个伪异步操作:

    <template>
        <input type="text" v-model="inputValue">
        <p>从输入框中获取到的数据:{{ passedInputValue }}</p>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                inputValue: '',
                passedInputValue: ''
            }
        },
        watch:{
            inputValue() {
                // 当inputValue数据发生变化以后,延迟三秒赋值给passedInputValue
                setTimeout(() => {
                    this.passedInputValue = this.inputValue;
                }, 3000)
            }
        }
    };
    </script>
    
    

    此时你就会发现,当你在input输入框中输入文字以后,p标签内的数据不是立马改变,而是过三秒才会去渲染。

    获取前一次的值

    在某些场景中,我们会需要上一次的数据,此时,侦听器就可以给我们两个值,旧值和新值。

    在上一个案例的基础上,我们只需要添加一个参数,即可获取旧值,代码如下:

    watch:{
        inputValue(value,oldValue) {
            // 第一个参数为新值,第二个参数为旧值,不能调换顺序
            console.log(`新值:${value}`);
            console.log(`旧值:${oldValue}`);
        }
    }
    
    

    handler方法和immediate属性

    前面我们已经知道,当我们侦听的值没有发生改变的时候,是不会触发侦听器的,并且,页面第一次渲染的时候也不会触发侦听器。

    但是现在我有个需求就是要让页面第一次渲染的时候就去触发侦听器呢?

    此时就要用到一个方法和一个属性。

    <template>
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                firstName: 'Su',
                lastName: 'Junyang',
                fullName: ''
            }
        },
        watch:{
            firstName: {
                handler(newName, oldName) {
                    this.fullName = newName + ' ' + this.lastName;
                },
                // 如果设置了false,那么在页面第一次渲染以后不会触发侦听器
                immediate: true
            }
        }
    };
    </script>
    
    

    deep 深度侦听

    所谓深度侦听就是侦听对象内部属性的值。

    我们之前用的侦听器都只能侦听一个变量的变化,(重点看一下代码中的注释)例如:

    data:{
        return {
            // 字符串发生变化,可以侦听
            firstName: 'Su',
            room:{
                name:"大床房",
                // 当房号发生变化的时候,侦听器并不能侦听到。
                // 因为侦听器只侦听到room,不能侦听number或者name
                number: 302
            }
        }
    },
    
    

    此时我们就需要深度侦听。
    深度侦听在代码上并不难实现,只需要在handler的基础上添加一个deep属性,代码如下:

    watch:{
        room:{
            handler(newRoom,oldRoom){
                console.log("房间号发生了变化")
            },
            deep: true
        }
    }
    

    案例:使用侦听器和定时器实现伪模糊搜索

    <template>
      <div class="search">
        <input type="text" v-model="inputValue" />
        <div class="search-block" v-for="(element, index) in results" :key="index">
          {{ element }}
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data() {
        return {
          results: [],
          mockData: [
            '浙江大学',
            '中国人民大学',
            '清华大学',
            '清华大学附属中学',
            '浙江理工大学',
            '浙江工业大学'
          ],
          inputValue: ''
        };
      },
      watch: {
        inputValue(value) {
          if (!!value) {
            setTimeout(() => {
              this.results = this.mockData.filter(el => {
                console.log(value);
    
                return el.indexOf(value) !== -1;
              });
            }, 300);
          }
        }
      }
    };
    </script>
    
    
    
    展开全文
  • Vue监听数据变化

    千次阅读 2021-08-18 17:15:54
    监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化 watch的基本用法 侦听器的书写位置 <script> export default { name: "app", // 数据 key---data value---Function data: function ...

    监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化

    watch的基本用法

    1. 侦听器的书写位置
      写在export default中与data和methods用,隔开
    <script>
      export default {
        name: "app",
        // 数据 key---data value---Function
        data: function () {
          return {
             count: 1
          };
        },
        // 方法 key---methods value---{}
        methods: {},
        //在export default中添加即可不用管顺序
        watch: {
           //监听内容
           count() {
            console.log("count发生了变化");
          }
        }
      };
    </script>
    

    监听器里的方法一定要与被监听的变量名一致

    侦听器的进阶用法

    获取前一次的值

    有的时候需要上一次的数据,再上一个案例中添加一个参数即可获取旧值

    watch:{
        inputValue(value,oldValue) {
            // 第一个参数为新值,第二个参数为旧值,不能调换顺序
            console.log(`新值:${value}`);
            console.log(`旧值:${oldValue}`);
        }
    }
    

    handler方法和immediate属性

    immediate: 可以让页面第一次渲染的时候去触发侦听器
    handler: 监听到修改之后这个函数会执行
    侦听器实际上是一个对象,里面包含了handler方法和其他属性:

    <script>
      export default {
        name: "app",
        watch: {
          firstName: {
            handler: function (newName, oldName) {
              this.fullName = newName + " " + this.lastName;
            },
            immediate: true
          }
        }
      };
    </script>
    
    展开全文
  • vue监听数据改变

    千次阅读 2021-01-29 13:15:32
    当data中的数据变化时,watch监听到并且执行 <template> <div> <p>大名: {{fullName}}</p> <p>名称: <input type="text" v-model="firstName"></p&g


    一、Vue中watch用法

    当data中的数据变化时,watch监听到并且执行

    <template>
        <div>
          <p>大名: {{fullName}}</p>
          <p>名称: <input type="text" v-model="firstName"></p>
        </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
            firstName: '张震',
            lastName: '整个',
            fullName: ''
        }
      },
      computed: {},
      watch: {
          firstName(newName, oldName) {
            this.fullName = newName + ' ' + this.lastName;
          }
      },
      created() {
    
      },
      mounted() {
      },
      beforeCreate() {}, // 生命周期 - 创建之前
      beforeMount() {}, // 生命周期 - 挂载之前
      beforeUpdate() {}, // 生命周期 - 更新之前
      updated() {}, // 生命周期 - 更新之后
      beforeDestroy() {}, // 生命周期 - 销毁之前
      destroyed() {}, // 生命周期 - 销毁完成
      activated() {},
      methods: {
      } 
    }
    </script>
    

    二、handler方法和immediate属性

    基本用法是是值变化时候,watch才执行,想让值最初时候watch就执行用到了handler和immediate属性

    watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
        immediate: true
      }
    }
    

    三、deep属性(深度监听,常用语对象下面属性的改变)

    deep属性(深度监听,常用语对象下面属性的改变)

    <template>
        <div class="a">
          <p>obj.lable: {{obj.lable}}</p>
          <p>obj.lable: <input type="text" v-model="obj.lable"></p>
        </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
            obj: {
              lable: "哈哈"
            }
        }
      },
      computed: {},
      watch: {
          obj: {
            handler(newName, oldName) {
                console.log('obj.lable changed');
            },
            immediate: true
         }
      },
      created() {
    
      },
      mounted() {
      },
      beforeCreate() {}, // 生命周期 - 创建之前
      beforeMount() {}, // 生命周期 - 挂载之前
      beforeUpdate() {}, // 生命周期 - 更新之前
      updated() {}, // 生命周期 - 更新之后
      beforeDestroy() {}, // 生命周期 - 销毁之前
      destroyed() {}, // 生命周期 - 销毁完成
      activated() {},
      methods: {
      } 
    }
    </script>
    

    输入数据改变obj.lable的值时,发现是无效的。因为vue受现代 JavaScript 的限制 ,Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

    watch: {
      obj: {
        handler(new, old) {
          console.log('obj.lable changed');
        },
        immediate: true,
        deep: true
      }
    }
    

    监听obj里的属性就加上deep属性,上面是监听obj整个对象的属性

    watch: {
      'obj.lable': {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        // deep: true
      }
    }
    

    监听obj的一个属性

    如图所示
    在这里插入图片描述

    展开全文
  • vue监听数据变化

    千次阅读 2020-04-10 15:51:36
    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化。 watch的基本用法 在之前我们在js中添加了data、methods,这一次我们要添加的是watch属性。下面我们先来眼熟一下...
  • vue监听接口状态

    2021-01-20 08:53:05
    data () { return { time: false // 判断 } }, methods: { dinshi () { if (this.time === true) {//判断是否超时 console.log('超时') this.$router.push({//跳转页面 path: `/error` ...
  • vue监听数据:computed与watch/methods

    热门讨论 2021-04-28 19:52:26
    2.监听指定数据,当指定数据发生改变时,才会被触发 watch侦听属性: 对象名代表要监听数据, 对象值为数据改变时要做的操作(处理函数), 监听数据的最新值会以形参的方式传进这个函数, 仅监听数据更新时...
  • 目录 1.vue计算属性computed,用来指定计算方法 2.Watch监听data数据 3.ref的使用,在vue中操作dom属性 1.vue计算属性computed,用来指定计算方法 总价 {{getsun}} computed计算属性和 methods方法的区别: 1....
  • 主要介绍了Vue数据监听方法watch的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue-数据监听-数组监听

    千次阅读 2022-01-12 15:44:28
    说完了对象的监听和后期添加对象的操作,接下来,我们来说一说针对于数组的监听。 1、首先还是定义一组数据用于展示,hobbys 为字符串数组,friends 为对象数组 const vm = new Vue({ el: '#root', data() { ...
  • 问题 在处理页面重新渲染时通常的做法是: ...vue 监听窗口大小发生改变 使用 window.addEventListener() 添加 resize 事件监听窗口变化 new Vue({ el: '#app', data() { return { render: true } },
  • 今天小编就为大家分享一篇vue 监听某个div垂直滚动条下拉到底部的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue监视数据的原理: vue会监视data中所有层次的数据。 如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的...
  • 1、使用v-model在select标签上进行数据双向绑定, 2、在data里边添加val:‘ ...以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 2.环境:vue+数据从父组jian件传进(TimeIntervalNumberData) <template> <div> <div id="chart-temperature-timeintervalnumber" style="width: 200px;height:30px;"></...
  • 今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue watch自动检测数据变化实时渲染的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue监听input标签的value值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue通过watch监听数据变化

    千次阅读 2020-04-12 10:18:15
    一:通过watch来监听数据变化,并通过打印显示 <template> <div class="personal-center"> <input type="text" placeholder="请输入" v-model="inputVal"/> <p>{{newVal}}</p> &...
  • vue监听浏览器主动刷新

    千次阅读 2022-03-10 18:01:11
    mounted() { ... this.beforeunloadHandler(e)) //监听页面刷新触发事件 }, methods(){ beforeunloadHandler(e) { //根据事件进行操作进行操作 console.log(e) console.log('浏览器刷新') .
  • Vue利用watch实现数据监听: 概述:watch是一个对象,键是需要观察的表达式,值是对应回调函数 作用:当表达式的值发生变化后,会调用对应的回调函数完成响应的监视操作 监听普通属性的改变: new Vue({ el:...
  • Vue - 监听数据的三种方法

    万次阅读 多人点赞 2018-08-11 13:13:35
    举一个案例,我们要拼接一个fullname,因此要监听到文本框数据的改变,这样才能知道什么时候去拼接 出一个 fullname 案例结构如下: &amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; &amp;amp...
  • js 实现VUE响应式监听数据

    千次阅读 2022-03-25 11:40:49
    ) } }) watcher.province(res=>{ console.log(res) }) postParams.province=1//修改 let state ={ province:'', city:'', area:'', data:{ value:99 } } // 设置对象 // valueData监听数据 // watcherValue:监听...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,928
精华内容 34,771
关键字:

vue监听数据

友情链接: 遗传算法.rar