watch:{
   监听的属性:function(旧值，新值) {
 
    }
}
 
代码：
<!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 监听的使用的更多相关文章

  1. vue监听滚动事件，实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  2. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  3. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  4. Vue跨路由触发事件，Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  5. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue 监听键盘,键盘修饰符keyup

    附录:键盘Key Code对照表 代码: <!doctype html> <html lang="en"> <head> <meta ch ...

  7. vue 监听路由变化

    方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的 ...

  8. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  9. vue 监听变量或对象

    注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...

  10. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

随机推荐

  1. CTF中的AWD套路

    今年参加了三起CTF比赛,属于初学者,基本除了web其他的不会,但分赛场AWD相对就没什么难度,基本都是技巧性.其中一场进入复赛了,本月底再次比赛(ctf题做的这么渣还能进也是绝了~),参照前人经验补 ...

  2. springMVC的数据封装

    编写实体类: package cn.mepu.domain; /** * @User 艾康 * @create 2019-11-12 13:56 */ public class User { priv ...

  3. ionic node-sass安装或编译失败：MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”

    错误原因:缺少windows构建插件 解决方法:npm install --global --production windows-build-tools  (如果目录在C盘下,需要管理员权限运行,全 ...

  4. MS14-068利用

    漏洞原理详情后续补上:kerberos 协议实现过程中的某些 bug,致使普通域用户可以任意伪造高权限 PAC,去请求 TGS 从而导致的权限提升,漏洞现在很少遇到了. 一.利用 需要拥有一个域账号的 ...

  5. 【Luogu】【关卡2-1】简单的模拟（2017年10月）

    任务说明:开始普及组的训练!所谓模拟,就是直接根据题意编写,思维难度简单. 铺地毯 进制转换 多项式输出 机器翻译 排座椅 笨小猴 都是简单模拟题  

  6. nodejs fs.readFile

    fs.readFile(path[, options], callback) path <string> | <Buffer> | <URL> | <inte ...

  7. kubeadm部署多master节点高可用k8s1.16.2

    一.架构信息 系统版本:CentOS 7.6 内核:3.10.0‐1062.4.1.el7.x86_64 Kubernetes: v1.16.2 Docker­ce: 19.03 推荐硬件配置:2核4 ...

  8. homebrew -- mac os 系统下的 apt-get、yum

    linux下有很方便的包管理器如:apt-get.yum,mac下也有类似的工具:Homebrew 和 Fink.MacPort.Flink是直接编译好的二进制包,MacPorts是下载所有依赖库的源 ...

  9. 多图上传控制器及模型代码（2）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  10. 项目管理模式：外瀑布内敏捷（有人称为“信封法”）--转自知乎大神：CORNERSTONE

    作者:CORNERSTONE 链接:https://www.zhihu.com/question/265968122/answer/878124580 来源:知乎 著作权归作者所有.商业转载请联系作者 ...