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. 对Promise的研究3

    Promise.race() Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.race([p1, p2, p ...

  2. SQL Server 中用While循环替代游标Cursor的解决方案

    在编写SQL批处理或存储过程代码的过程中,经常会碰到有些业务逻辑的处理,需要对满足条件的数据记录逐行进行处理,这个时候,大家首先想到的方案大部分是用“游标”进行处理. 举个例子,在订单管理系统中,客服 ...

  3. 20180805-Java DataInputStream类

    DataInputStream dis = DataInputStream(InputStream in); 下面的例子演示了DataInputStream和DataOutputStream的使用,该 ...

  4. js不区分大小写匹配并代码高亮，且不改变原来文本大小写格式

    //高亮字符串 string: 需要处理的字符串,keyword:键盘输入的内容 function heightLight(string, keyword) { var reg = new RegEx ...

  5. 5 October

    POJ2676 Sudoku 位运算 + 搜索.更好的优化方法:方案数最小的空格先填. 把某一位 置为 0:a &=~ (1<<n) 把某一位 置为 1:a |= (1<&l ...

  6. JavaScript面向对象初步认识

    一.面向对象初步认识 1.什么是对象? 一句话解释: 万物皆对象 对象是有属性的:用{ }来写入! 2.对象的应用(接口) json 接口简单的说就是后台提供给前端提供数据的,让我们进行渲染! 请求接 ...

  7. 【已转移】【Java架构：系统架构理论】一篇文章搞掂：RESTful

    一.定义 1.起源 来源:Roy Fielding的博士论文. 目的:理解和评估以网络为基础的应用软件的架构设计,得到一个功能强.性能好.适宜通信的架构. 定义:一种实现软件通信的架构风格.设计风格, ...

  8. eureka注册中心wro.css wro.js 404

    注册中心和配置中心放在一个module里面,如果不配置配种中心的访问前缀,会被config拦截.所以改动如下: package com.cloud.stagging.lhcloudeureka; im ...

  9. Dpr ppi 适配 等概念 弹性属性的讲解

    Dpr: Dpr的全称(Device pixel ratio)像素设备比例:就是说每个设备像素上占有的css位像素的个数 苹果手机常见的设备像素比:1.0安卓 iPhone2.0  3.0 如果是1. ...

  10. 杂项-Unicode：Unicode

    ylbtech-杂项-Unicode:Unicode Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局 ...