<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <p>{{ msg }}</p>

    <button @click="clickHandler">修改</button>

</div>

<script src="vue.js"></script>

<script>

    new Vue({

        el:"#app",

        data(){

            return{

                msg:"alex",

                age:18,

            }

        },

        methods:{

           clickHandler(){

               this.msg="wusir" // 当msg的数据属性 发生改变,下面的watch就会立马监听**

           }

        },

        watch:{ //watch是监听单个属性, 是单个单个的监听,如果监听多个属性就要声明多个属性

            //watch 监听msg属性

            //function函数里面要有返回值

            "msg":function(value){

                //监听到数据之后,可以在这个地方做任何操作*****

             console.log(value);

            if (value === "wusir"){

                alert(1);

                this.msg = "大wusir"}//修改后内容

            },

            "age":function(value){}//监听age属性

        }// watch对应的对象,可以监听多个属性,比如监听msg

    })

</script>

</body>

</html>

侦听器watch 监听单个属性的更多相关文章

  1. 雷火神山直播超两亿，Web播放器事件监听是怎么实现的？

    Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...

  2. WCF-ServiceEndpoint的监听地址与监听模式

    ServiceEndpoint具有一个可读可写的ListenUri属性,该属性表示服务端终结点的物理监听地址,该地址默认和终结点逻辑地址一致(即ServiceEndpoint的Uri).对于客户端来说 ...

  3. Oracle静态监听与动态监听概念全解析

    基于11g,linux5.5做出的测试,单实例数据库做出的测试. 1.注册 Instance到监听器去注册自己的Instance_name与ORACLE_HOME,还可以选择添加global_dbna ...

  4. vue watch 深度监听以及立即监听

    vue watch对象可以监听数据,数据发生变化,处理函数 watch虽可以监听,但只是浅监听,只监听数据第一层或者第二层.比如对于整个对象的监听,需要用到深度监听 vm.$watch('obj',f ...

  5. oracle 11g rac修改监听端口（远程监听和本地监听）

    转至:https://www.cnblogs.com/yj411511/p/12459533.html 目录 1.修改远程监听端口 1.1 查看远程监听状态 1.2 修改SCAN listener端口 ...

  6. js实现事件监听与阻止监听传播

    监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...

  7. ExecutionListener,TaskListener流程监听 和任务监听

    1.ExecutionListener 流程实例的启动和结束. 选中一条连线. 节点的开始和结束. 网关的开始和结束. 中间事件的开始和结束. 开始时间结束或结束事件开始. 2.TaskListene ...

  8. vue2.0中watch总结：普通监听和深度监听

    watch:{} 是一个对象,一定要当成对象来用,可监听数据,是vue中数据发生变化进行处理的函数, 它有三个选项 第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数.第二个是de ...

  9. watch实现监听Vuex状态监听(利用computed)

    Vuex 通过 store 选项,提供了一种机制将状态从根组件"注入"到每一个子组件中(需调用 Vue.use(Vuex)):通过在根实例中注册 store 选项,该 store ...

随机推荐

  1. ELK日志系统：Elasticsearch + Logstash + Kibana 搭建教程 good

    环境:OS X 10.10.5 + JDK 1.8 步骤: 一.下载ELK的三大组件 Elasticsearch下载地址: https://www.elastic.co/downloads/elast ...

  2. 【转】 C#后台调用前台javascript的五种方法

    第一种,OnClientClick    (vs2003不支持这个方法)<asp:ButtonID="Button1" runat="server" Te ...

  3. 以双斜杠//开头的URL – 依赖协议的URL

    原文:以双斜杠//开头的URL – 依赖协议的URL 不知道大家有没有见过下面这种 url 写法: <img src="//domain.com/img/logo.png"& ...

  4. Debian下编译安装驱动模块

    在Linux下,我们常有需要自己来编译安装驱动模块的情况,例如要安装显卡驱动,要安装无线驱动,有的时候某个程序的安装使用与需要安装相应的驱动模块.Debian Linux下的生活本已十分简单,使用ap ...

  5. 从零开始学习音视频编程技术（三） 开发环境搭建（Qt4.86手动设置环境，主要就是设置g++和qmake，比较透彻，附下载链接）

    1.先下载安装Qt 我们使用的版本是4.8. 可以自行百度下载也可以从下面的网盘地址下载: Qt库和编译器下载: 链接:http://pan.baidu.com/s/1hrUxLIG 密码:0181 ...

  6. SQLServer 复制中移除和添加发布而不初始化所有项目

    原文:SQLServer 复制中移除和添加发布而不初始化所有项目 -- 若提前"禁止架构更改",新增的列不会自动添加大发布,此时应使用 sp_articlecolumn 添加列 E ...

  7. 零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)

    原文:零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上) 几何外部的 UIElement 会在呈现的配置中以视觉化方式裁剪. 几何不一定要 ...

  8. 零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

    原文:零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页 本章将教大家如何把制作好的Blend专案变为可以让任何人在网际网路浏 ...

  9. Android实现简单音乐播放器（startService和bindService后台运行程序）

    Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能有 ...

  10. 为什么需要使用Git客户端？（使用msysgit）

    Git 是 Linux Torvalds 为了帮助管理 Linux® 内核开发而开发的一个开放源码的版本控制软件.正如所提供的文档中说的一样,“Git 是一个快速.可扩展的分布式版本控制系统,它具有极 ...