iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue watch中监听值的变化,判断后修改值方式
  • 885
分享到

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

2024-04-02 19:04:59 885人浏览 薄情痞子
摘要

目录watch监听值的变化,判断后修改值watch监听data函数中数据改变的三种方式1.常用型(浅层监听)2.深层监听(利用deep属性)3.深层监听某一个特定属性(用字符串表示对

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属性值的改变。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue watch中监听值的变化,判断后修改值方式

本文链接: https://www.lsjlt.com/news/145534.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue watch中监听值的变化,判断后修改值方式
    目录watch监听值的变化,判断后修改值watch监听data函数中数据改变的三种方式1.常用型(浅层监听)2.深层监听(利用deep属性)3.深层监听某一个特定属性(用字符串表示对...
    99+
    2024-04-02
  • vue中watch如何监听对象及对应值的变化
    这篇文章主要为大家展示了“vue中watch如何监听对象及对应值的变化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中watch如何监听对象及对应值的变化...
    99+
    2024-04-02
  • 使用watch监听对象里面值的变化
    目录watch监听对象里面值的变化1.样式代码2.data里的代码3.watch监听watch如何深度监听对象变化深度监听总结watch监听对象里面值的变化 后台管理有时候有选择选择...
    99+
    2023-01-14
    watch监听对象 watch监听 watch监听对象值变化
  • vue正确使用watch监听属性变化方式
    目录基本用法监听object使用deep参数重新赋值通过路径监听内部数据初始化变量触发监听回调总结Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应。但一旦涉及到复杂数据的...
    99+
    2024-04-02
  • vue中watch监听不到变化的解决
    目录watch监听不到对象内部的变化解决方法:watch的handler方法的两个参数值相同解决方法:全部代码watch监听不到对象内部的变化 有的时候vue会出现这种现象,无法监听...
    99+
    2023-01-05
    vue watch监听不到 vue watch监听
  • Vue Watch方法不能监听到数组或对象值的改变怎么解决
    这篇文章主要介绍了Vue Watch方法不能监听到数组或对象值的改变怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue Watch方法不能监听到数组或对象值的改变怎么解决文章都会有...
    99+
    2023-06-29
  • Vue.js监听select2的值改变进行查询方式
    目录监听select2的值改变进行查询页面中引用select2组件在js里引入如下代码:在vue实例中使用,进行测试监听select的事件监听select2的值改变进行查询 由于前端...
    99+
    2024-04-02
  • Vue中localStorage的用法和监听localStorage值的变化
    目录localStorage APIsetItem()getItem()removeItem()clear()key()在vue中实现监听localstorage中某个键对应的值的变...
    99+
    2023-05-16
    localStorage的用法 监听 localStorage值的变化
  • vue如何实时监听input值的变化
    本篇内容介绍了“vue如何实时监听input值的变化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、vuejs 2.0中js实时监听inp...
    99+
    2023-07-04
  • Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解
    目录前言一:利用索引直接改变arr的值 如我在button事件中写的(arr[0]=1000)二:直接修改数组的长度 如this.arr.length=3 总结如下前言 V...
    99+
    2024-04-02
  • vue如何监听el-select选择值的变化
    目录监听el-select选择值的变化方法很简单@change就可以实现@change绑定了currStationChangeel-select将选中的值传递到需要的位置方法一方法二...
    99+
    2024-04-02
  • Vue子组件监听父组件值的变化
    目录子组件监听父组件值变化子组件监听父组件的值同步更新数据子组件监听父组件值变化 子组件中利用watch监听父组件值的变化 // 子组件 props: ["a"],     watc...
    99+
    2024-04-02
  • vue实现监听数值的变化,并捕捉到
    目录上传头像的例子是完整的,登录没全部展示1. 封装全局监听方法2. 触发,并将监听的值存入Storage3. 监听完整例子(代码看上面 )第一步第二步第二步第三步上传头像的例子是完...
    99+
    2022-11-13
    vue监听 监听数值变化 vue捕捉数值
  • Vue.js监听select2的值改变进行查询方式是什么
    今天小编给大家分享一下Vue.js监听select2的值改变进行查询方式是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2023-06-29
  • vue如何实现监听数值的变化并捕捉
    这篇文章主要介绍了vue如何实现监听数值的变化并捕捉的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何实现监听数值的变化并捕捉文章都会有所收获,下面我们一起来看看吧。1. 封装全局监听方法在main.js...
    99+
    2023-07-04
  • 在Angular中如何监听某个值的变化
    目录Angular监听某个值的变化使用getterangular使用form表单监听数据引入主要使用方法类 FormGroup,FormBuilder,Validators赋值引入创...
    99+
    2023-03-06
    Angular监听 Angular监听某值 监听某个值的变化
  • vue.js中怎么实时监听input值的变化
    今天就跟大家聊聊有关vue.js中怎么实时监听input值的变化,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、vuejs 2.0中js实时监听i...
    99+
    2024-04-02
  • 在Angular中怎么监听某个值的变化
    今天小编给大家分享一下在Angular中怎么监听某个值的变化的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Angular监听...
    99+
    2023-07-05
  • vue项目中的数据变化被watch监听并处理
    目录vue数据变化被watch监听处理监听当前vue文件数据监听vuex中的数据如何正确使用watch监听属性变化基本用法监听object初始化变量触发监听回调vue数据变化被wat...
    99+
    2024-04-02
  • 关于Vue不能监听(watch)数组变化的解决方法
    目录一、vue监听数组 二、vue无法监听数组变化的情况 一、vue监听数组 vue实际上可以监听数组变化,比如 data () { return { watchA...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作