<!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. Qt程序发行Linux版,软件打包知识(patchelf 工具修改依赖库,确认 qmake -v 是自己使用的Qt版本,否则用export PATH进行修改)good

    patchelf 工具可以修改已编译运行程序的依赖库位置和指定库链接器 patchelf --set-rpath patchelf --set-interpreter 通过这个工具 https://g ...

  2. js通过沿着作用域链还是原型链查找变量

    这是一道非常典型的JS闭包问题,结果和具体的解析请看这里. 对于其中的`函数作用域链的问题`博主似乎没有解释清楚,有一些疑问:js中的变量到底是沿着作用域链还是原型链查找呢? 首先,要分清作用域链与原 ...

  3. 微信小程序把玩(三十三)Record API

    原文:微信小程序把玩(三十三)Record API 其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们 ...

  4. 有未经处理的异常(在 xx.exe 中): 堆栈 Cookie 检测代码检测到基于堆栈的缓冲区溢出。

    一般这个问题是数组越界. 我产生这个异常的代码是这句:memcpy(tmp_cert.byKey, m_row[2], 255); 255的长度超过了char数组tmp_cert.byKey的长度.

  5. win10 uwp 获得Slider拖动结束的值

    原文:win10 uwp 获得Slider拖动结束的值 本文讲的是如何获得Slider移动结束的值,也就是触发移动后的值.如果我们监听ValueChanged,在我们鼠标放开之前,只要拖动不放,那么就 ...

  6. spring.net的简单使用(一)入门

    Spring.net是一个非常强大的框架和工具,下面是百度百科对它的介绍. Spring.NET为建立企业级应用提供了一套轻量级的解决方案.通过Spring.NET,我们可以用统一且透明的方式来配置应 ...

  7. 教你如何在 Visual Studio 2013 上使用 Github

    介绍 我承认越是能将事情变简单的工具我越会更多地使用它.尽管我已经知道了足够的命令来使用Github,但我宁愿它被集成到IDE中.在本教程中,我会告诉你使用Visual Studio 2013如何实现 ...

  8. 推荐一些C#相关的网站、资源和书籍 (转载自http://blog.csdn.net/chinacsharper/article/details/17514923)

    一.网站 1.http://msdn.microsoft.com/zh-CN/ 微软的官方网站,C#程序员必去的地方.那里有API开发文档,还有各种代码.资源下载. 2.http://social.m ...

  9. 统计插件,Highcharts,以及modelformset

    一.modelfromset组件 1.作用:用于批量处理多个表单 form表单对应的组件是formset Modelform对应的组件是modelformset 2.引入 From django.fo ...

  10. java泛型方法返回泛型结果

    public class Test { static HashMap<String, String> sMap = new HashMap<String, String>(); ...