Vue中watch用法

前端 专栏收录该内容
2 篇文章 0 订阅

Vue中watch用法

我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法(vue)
具体如下图:


vue代码

 账户名称:<el-input v-model="qqName" style="width: 10%"></el-input>
 账户密码:<el-input v-model="qqPwd" style="width: 10%"></el-input>

vue中 data() {return {}} 中定义变量

data() {
    return {
      qqName: "",
      qqPwd: "",
      	   }
       }

Vue中watch{ }中定义

watch: {
    //当变量值发生改变是进行调用
    qqName(newValue, oldValue) {
      console.log(
        "当变量值发生改变是进行调用oldValue",
        oldValue,
        "newValue:",
        newValue
      );
    },
    qqPwd(value) {
      console.log(value);
    },
  },

效果

在这里插入图片描述


若要初始化就进行一次调用则可以改为:

 //页面渲染时就调用一次
     qqName: {
        handler(newValue, oldValue) {
        console.log("页面渲染时就调用一次oldValue", oldValue, "newValue:", newValue);
      },
        immediate: true
     },

总结:

方法说明
变量名(参数1,参数2){ }参数1:更新后的数值; 参数2:更新前的数值;
变量名(参数1){ }}参数1:新数值;
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值