vue 监听的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" >
<p>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data() {
return {
msg:'hello world'
}
},
watch:{
msg:function(newValue,oldValue) {
console.log(oldValue);
console.log(newValue);
}
}
});
</script> </body>
</html>
效果：
vue 监听的使用的更多相关文章
- vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- Vue跨路由触发事件，Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 监听键盘,键盘修饰符keyup
附录:键盘Key Code对照表 代码: <!doctype html> <html lang="en"> <head> <meta ch ...
- vue 监听路由变化
方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的 ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue 监听变量或对象
注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
随机推荐
- 服务bindService()方法启动服务
public class MainActivity extends Activity { private EditText studentno; private ServiceConnection c ...
- 《代码大全2》读书笔记 week 7
博主终于继续更<代码大全2>了 (*´・ω・`)⊃,课上老师一再强调读书笔记要写出自己的心得不能简单摘抄,所以我现在基本上只会写一下自己在阅读过程中印象深刻或者有发散思考的地方,字数可能 ...
- OpenCV学习笔记 笔记汇总
转载来源:https://www.cnblogs.com/tonyc/p/6407318.html 今后开始学习OpenCV 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址:http ...
- windows server 2016 支持多用户远程登录
服务器设置多用户同时远程桌面,可以提高访问效率,避免人多抢登服务器. 1. 首先需要先安装远程桌面服务 配置组策略,运行框输入gpedit.msc,打开计算机配置–>管理模板—>wind ...
- 使用ReadStream方法读取文件事件传递过程
const fs = require('fs'); let file = fs.createReadStream("filename.js"); file.on("ope ...
- 安装docker-ce与卸载(centos 7)
1.安装依赖 docker依赖于系统的一些必要的工具,可以提前安装. 1 yum install -y yum-utils device-mapper-persistent-data lvm2 2.添 ...
- 生产者消费者模式-->线程
#_author:来童星#date:2019/12/17#生产者消费者模式-->线程from queue import Queueimport random,time,threading#生产者 ...
- Delphi ADOQuery的 DisableControls 和 EnableControls方法
DisableControls方法是在程序修改或后台有刷新记录的时候切断数据组件,如TTABLE.ADOQUERY等等与组件数据源的联系.如果没有切断,数据源中只要一有数据的改动,尤其是批量改动的话, ...
- Robot Framework：变量与运算
设置变量 ...
- Android中的隐藏API和Internal包的使用之获取应用电量排行
今天老大安排一个任务叫我获取手机中应用耗电排行(时间是前天晚上7点到第二天早上10点),所以在网上各种搜索,没想到这种资料还是很多的,发现了一个主要的类:PowerProfile,但是可以的是,这个类 ...