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. php str_replace()函数 语法

    php str_replace()函数 语法 作用:字符串替换操作,区分大小写大理石构件 语法:str_replace(find,replace,string,count) 参数: 参数 描述 fin ...

  2. K短路模板POJ 2449 Remmarguts' Date

      Time Limit: 4000MS   Memory Limit: 65536K Total Submissions:32863   Accepted: 8953 Description &qu ...

  3. 01.cordova 安装及项目创建

    1.安装cordova cnpm install -g cordova@6.0.0  这里用6.0.0版本,默认下载最新版本,创建项目时候会报错  2.创建项目 cordova create myap ...

  4. CSU 1553 Good subsequence（RMQ问题 + 二分）

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1553 Description Give you a sequence of n nu ...

  5. leetcode 238. 除自身以外数组的乘积 (python)

    给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输入: [1 ...

  6. [转]Hook executed successfully but returned HTTP 403

    原文地址:https://www.cnblogs.com/chenglc/p/11174530.html jenkins配置gitlab的webhook,完成配置,测试结果显示 Hook execut ...

  7. Spring中两种引入配置文件方式

    用过Spring的人都知道,我们一般把数据库的配置.日志的配置或者其他的通用配置放在单独的配置文件中,在和Spring整合时,一般通过以下两种方法引入: <context:property-pl ...

  8. 第 4 章 前端基础之jquery

    一.jQuery是什么? 1. jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. 2. jQuery是继prototype之后又一 ...

  9. 15.队列Queue的特点以及使用,优先级等

    #生产者与消费者模式,模式解释:比如MVC设计模式 ''' 1.队列 (1)特点:先进先出 (2)python2 VS python3 python2:from Queue import queue ...

  10. Phone-java标准类

    //project-module-package //.代表包的目录层次 package cn.learn.day01.demo01; /* 1.类是一组相关属性(成员变量)与行为(方法)的集合,对象 ...