Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Vue监听属性</title>

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

 </head>

 <body>

  <div id="app">

    <input type="text" v-model="message">

  </div>

  <script>

   new Vue({

     el:"#app",

     data:{

       message:"Hello world"

     },

     watch:{

       message:function(){

         alert("你监听的message有变化了"); 　

       }

     }

   })

  </script>

 </body>

 </html>

这样无论我增加还是删除都是有响应的

在做一个例子结束这篇博客！

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Vue监听属性-控制颜色变化</title>

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

 <style>

  #color {

    display:inline-block;

    width:100px;

    height:100px;

    border-radius:100%;

  }

 </style>

 </head>

 <body>

  <div id="app">

    <div>

        <input type="range" min="0" max="50" v-model="t">

        <span>{{ t }}</span>

    </div>

    <span id="color" :style="{backgroundColor:'rgb('+r+','+g+','+b+')'}"></span>

  </div>

  <script>

   new Vue({

     el:"#app",

     data: {

       t:0,

       r:0,

       g:255,

       b:255

     },

     watch:{

       t:function(){

         this.r = this.t*5;

         this.g = this.b = 255 - this.r;

       }

     }

   })

  </script>

 </body>

 </html>

效果如下:

当鼠标滑动时颜色会发生变化

Vue 侦听属性的更多相关文章

  1. 六、vue侦听属性

    $watch 实际上无论是 $watch 方法还是 watch 选项,他们的实现都是基于 Watcher 的封装.首先我们来看一下 $watch 方法,它定义在 src/core/instance/s ...

  2. vue侦听属性和计算属性

    监听movies,实现点击添加显示到li标签里面.页面效果如下: <template> <div> <div class="moive"> &l ...

  3. VUE 计算属性 vs 侦听属性

    计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...

  4. [vue]计算和侦听属性(computed&watch)

    先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...

  5. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  6. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  7. vue计算属性VS侦听属性

    原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...

  8. 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

    https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...

  9. Vue 侦听器 watch

    1. 侦听器 watch Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器. 当需要在数据变化时执行异步或开销较大的操作时,这 ...

随机推荐

  1. Selenium-ActionChainsApi介绍

    ActionChains 模拟鼠标悬浮到某一个位置,做一系列的连贯操作,使用Selenium提供的ActionChains模块 引入方式 from selenium.webdriver.common. ...

  2. Windows无法启动MapGIS DataStorage Service服务

    但是启动又启动不了,查看属性 发现计算机服务器确实少了该文件目录.. 可能是不小心删除了? 之前确实有删过一些文件 下次直接把.net禁止就可以了,不用删除,不然不小心删除了其它服务.. 参考文献:h ...

  3. Python分布式爬虫打造搜索引擎完整版-基于Scrapy、Redis、elasticsearch和django打造一个完整的搜索引擎网站

    Python分布式爬虫打造搜索引擎 基于Scrapy.Redis.elasticsearch和django打造一个完整的搜索引擎网站 https://github.com/mtianyan/Artic ...

  4. jQuery中的serializer序列化—炒鸡好用

    jQuery.serializer()序列化 serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串. serialize()函数常用于将表单内容序列化,以便用于AJAX提 ...

  5. python2.7+RobotFramework的UI自动化环境搭建

    robotFramework是一种比较常见的自动化测试框架,此篇记录环境搭建 目录 1.软件准备 2.执行安装 1.软件准备 python-2.7.15.amd64.msi              ...

  6. Memecached 服务器安装（一）

    Memecached 服务器安装(一) 前提:首先您的php环境已经安装完成,如若没有则参考 http://www.cnblogs.com/xulele/p/5264781.html 安装环境链接:h ...

  7. Jmeter接口测试报告模板优化

    优化后在接口报告的接口信息中,直接展示url,method,结果和响应时间,详情中展示请求和响应数据.具体如下: 模板文件 jmeter-results-detail-report_21.xsl: & ...

  8. 机器学习实战笔记-10-K均值聚类

    K-均值聚类 优点:易实现.缺点:可能收敛到局部最小值,大规模数据集上收敛较慢:适用于数值型数据. K-均值聚类(找到给定数据集的k个簇) 算法流程 伪代码: 创建k个点作为起始质心(经常是随机选择) ...

  9. APT攻防整理-常用CVE

    常用CVE CVE-- 受影响版本 Windows /Windows /Windows Server /Windows Server R2/Windows Server /Windows Server ...

  10. 求bit中1的个数有几种做法

    原文 求bit中1的个数有几种做法: - x & (x - 1) - Hamming weight的经典求法,基于树状累加:http://en.wikipedia.org/wiki/Hammi ...