vue中实时监听对象或变量的变化
demo中监听了Input的变化,主要用到的是watch
1. 监听单个对象:
<template>
<div class="personal-center">
<input type="text" placeholder="请输入" v-model="inputVal"/>
</div>
</template> <script> export default {
name: 'demo',
data() {
return {
inputVal: ''
}
},
watch: {
inputVal(val, oldVal) {
console.log("inputVal = " + val + " , oldValue = " + oldVal)
}
}
}
</script>
具体页面展示:
修改input的值之前:
每一次修改input值都会监听到:
2. 监听多个对象:
data() {
return {
realName: '',
idCard: '',
isSubmit: false
}
},
computed: {
submitElement() {
const {realName, idCard} = this
return {
realName,
idCard
}
}
},
watch: {
submitElement: {
handler: function (val) {
if (val.realName.trim().length > 0 && this.idCard.trim() > 0) {
this.isSubmit = true
} else {
this.isSubmit = false
}
},
deep: true
}
}
vue中实时监听对象或变量的变化的更多相关文章
- vue实现实时监听文本框内容的变化(最后一种为原生js)
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- vue中实时监听移动端屏幕高度(采坑后实践)
最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue watch深度监听对象,实现数据联动
当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a1 ...
- Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!
最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
随机推荐
- react-router v4 实现路由拦截的一种思路(待验证)
出处:https://segmentfault.com/q/1010000010905474
- Docker容器挂载主机目录访问出现Permission denied的解决办法
Docker挂载主机目录,访问相应的文件出现Premission denied的权限访问问题 挂载后,查看相应的文件出现如下的提示: [root@ba471da26d07 soft]# lsls: c ...
- LOJ 2743(洛谷 4365) 「九省联考 2018」秘密袭击——整体DP+插值思想
题目:https://loj.ac/problem/2473 https://www.luogu.org/problemnew/show/P4365 参考:https://blog.csdn.net/ ...
- ps 和 top 的cpu的区别
cpu的计算 ps cpu的定义 man page中给出的定义: cpu utilization of the process in "##.#" format. Currentl ...
- Linux lsattr命令详解
Linux lsattr命令 Linux lsattr命令用于显示文件属性. 用chattr执行改变文件或目录的属性,可执行lsattr指令查询其属性 用法: lsattr [-adlRvV][文件或 ...
- Qt中窗口退出事件
窗口右上角的X按键会导致其在不给出任何提示的情况下直接退出, 当点击右上角的x按键时,会触发Qt中的一个事件处理函数:void QWidget::closeEvent ( QCloseEvent * ...
- linux zip删除指定文件和追加文件
使用zip命令的-d参数即可删除zip包中的特定文件. 示例:假设有test.zip,包含_code(目录)._code.zip.readme.txt三个文件,现在要删除test.zip中的_code ...
- WyBox 7620a 启用第二个串口
要修改的文件有两个 mt7620a.dtsi MT7620a.dts 1.进入target/linux/ramips/dts/ mt7620a.dtsi 把”disabled”改为”ok”,添加两行 ...
- excel技巧--批量生成工资条
要想生成如上图的工资条,快速的方法如下: 1.在工资表右侧建立一升序数字列,完成后再复制该列,重复粘贴一次在该列底部.2.对该表排序:“开始”-->“排序和筛选”-->自定义排序.在对话框 ...
- 如何在Java中获取键盘输入值
程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ...