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：新数值；

Vue中watch用法相关推荐

vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
vue中inject用法
作用:刷新vue组件使用方法: 在APP.vue中 provide(){return {reload:this.reload}}, methods:{reload(){this.isRouterAl ...
Vue中props用法
在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素 ...
关于template标签用法总结(含vue中的用法总结)
文章目录一.html5中的template标签二.template标签操作的属性和方法三.vue中的template 1.template标签在vue实例绑定的元素内部 2.vue实例中的tem ...
关于 template 标签在 js vue 中的用法
template 定义内容模板 <template> 元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现. 将模板视为一个可存储在文档中以便后续使用的内容片段.虽然解析器在加载 ...
Vue中computed用法
一. computed是什么? 对于任何复杂逻辑,你都应当使用计算属性. computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义. 然后就可以在页面上进行双 ...
ts watch路由参数变化_TypeScript基础（六）：TS 在 Vue 中的用法，data，生命周期，methods，computed，props，watch，$emit...
其实 ts 在 vue 的环境下,我们经常用的一个东西就是上一篇博客讲的装饰器. 装饰器一般情况下有三种用途: 1,装饰整个类. 2,装饰某一个方法. 3,装饰某一个属性. 而这三种用途对 vue 来 ...
Vue中keep-alive用法
什么是keep-alive? 在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件. 也就是说,kee-alive ...

Vue中watch用法

Vue中watch用法

总结：

Vue中watch用法相关推荐

最新文章

热门文章