Vue watch中监听值的变化,判断后修改值方式

 更新时间:2022年04月11日 08:37:46   作者:水木Moira  
这篇文章主要介绍了Vue watch中监听值的变化,判断后修改值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

watch监听值的变化,判断后修改值

在这里插入图片描述

计数器有最小值与最大值的限制,且中间的文本输入框可自己输入值。

实现方式是在watch中监听文本输入框绑定的v-model,跟最大最小值比较后,如果有需要,则改变值。

<mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field>
watch: {
            //监听用户输入的重量值
            //如果超过最大重量,弹出提示,并且将输入框重量置于最大值
            //如果低于最小重量,弹出提示,并且将输入框重量置于最小值
            weightNum(val){
                if(val<this.weightLimit.minWeight){
                    this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight});
                    this.$data.weightNum = this.weightLimit.minWeight;
                }
                else if(val>this.weightLimit.maxWeight){
                    this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight});
                    this.$data.weightNum = this.weightLimit.maxWeight;
                }
            }        
        },

核心:

this.$data.weightNum = this.weightLimit.minWeight;

这里如果直接

this.weightNum = this.weightLimit.minWeight;

是没有用的。

Vue_watch()方法,检测数据的改变。

 <script type="text/javascript">
            var vm = new Vue({
                el: app01,
                data:{
                    a:'test',
                }
            })
            // 检测数据'a'的改变,放数据改变时执行
            vm.$watch('a', function(newval, oldval){
                console.log(newval, oldval);
            })
            vm.$data.a = 'wdc'
        </script>

watch监听data函数中数据改变的三种方式

在Vue中有一个watch方法可用于监听数据的改变,避免重复添加监听函数,watch中有三种监听数据的方式:

1.常用型(浅层监听)

 如此即可监听loading值的变化,并进行相应操作。

2.深层监听(利用deep属性)

 这样利用deep属性,将deep设为true,则可进行深层监听,只要modalForm中任意一个属性的值发生改变,则都会调用handler函数,当然该函数名可随意。

3.深层监听某一个特定属性(用字符串表示对象属性的调用)

此时只会监听modalForm里面的model属性,当他的值发生改变时才会执行回调函数。

4、利用computed计算属性

 此时在添加了计算属性后,可以像浅层监听一样的方式监听深层的model属性值的改变。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue组件component的注册与使用详解

    vue组件component的注册与使用详解

    组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签,这篇文章主要介绍了vue组件component的注册与使用,需要的朋友可以参考下
    2022-08-08
  • vue.js的提示组件

    vue.js的提示组件

    这篇文章主要为大家详细介绍了vue.js实现一个漂亮、灵活、可复用的提示组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue3实现无缝滚动组件的示例代码

    vue3实现无缝滚动组件的示例代码

    在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,所以小编今天为大家介绍一下如何利用vue3实现一个无缝滚动组件吧
    2023-09-09
  • Vue利用插件实现打印功能的示例详解

    Vue利用插件实现打印功能的示例详解

    这篇文章主要为大家详细介绍了Vue如何利用vue-print-nb插件实现打印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学一下
    2023-03-03
  • Vue实现单点登录控件的完整代码

    Vue实现单点登录控件的完整代码

    这里提供一个Vue单点登录的demo给大家参考,对Vue实现单点登录控件的完整代码感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • vue循环el-button实现点击哪个按钮,那个按钮就变色

    vue循环el-button实现点击哪个按钮,那个按钮就变色

    这篇文章主要介绍了vue循环el-button实现点击哪个按钮,那个按钮就变色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue递归组件实现elementUI多级菜单

    vue递归组件实现elementUI多级菜单

    这篇文章主要为大家详细介绍了vue递归组件实现elementUI多级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • webpack+vue.js构建前端工程化的详细教程

    webpack+vue.js构建前端工程化的详细教程

    这篇文章主要介绍了webpack+vue.js构建前端工程化的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • Vue父子之间值传递的实例教程

    Vue父子之间值传递的实例教程

    这篇文章主要给大家介绍了关于Vue父子之间值传递的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • vue子组件设计provide和inject理解使用

    vue子组件设计provide和inject理解使用

    这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论