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. Java浏览器弹出下载框，多个文件导出压缩包

    项目里一直有这个功能,也一直没怎么注意,今天研究了一下 依据逻辑往下走: 首先是要下载的ajax的Java方法,只有返回值需要设定一下,其他的不用管: Map<String, Object> ...

  2. Telegraf根据配置文件启动（Influxdb的数据收集）

    1.创建一个telegraf.config文件 telegraf -sample-config -input-filter cpu:disk:diskio:net:system:mem -output ...

  3. sql2000如何完美压缩.mdf文件

    --收缩数据库 dbcc shrinkdatabase('test_db') , ) --数据文件mdf , ) --日志文件ldf ) --更新

  4. MS4W安装教程

    简介 欢迎使用MS4W,这是由Gateway Geomatics开发的快速简便的安装程序,用于为Windows及其附带应用程序(如Geomoose.MapBender.Openlayers等)设置Ma ...

  5. 有关于log4j详解

    Log4j记录日志使用方法 一.什么是log4j Log4J是Apache的一个开放源代码的项目.通过使用Log4J,程序员可以控制日志信息输送的目的地,包括控制台,文件,GUI组件和NT事件记录器, ...

  6. 学习日记12、list集合中根据某个字段进行去重复操作

    List<T_CusBankCardInfoModel> blist = B_BLL.GetListByCusId(CusIds).Distinct(new ModelComparer() ...

  7. python杂谈

    1.for循环过界保护 例如: a=len([1,2,3]) for i in range(a): for j in range(i+1:a) print(i,j) 不会报错 2.python集合和列 ...

  8. linux flock()

    表头文件  #include<sys/file.h> 定义函数  int flock(int fd,int operation); 函数说明  flock()会依参数operation所指 ...

  9. javaScript Map

                  }                   } }                          vertices.push(v);         adjList.set ...

  10. 《剑指offer》面试题4 替换空格 Java版

    (给一个足够长的字符数组,其中有一段字符,将' '(空格)替换成'%' '2' '0'三个字符,原字符段由'\0'结尾) 书中方法:这道题如果从头到尾扫描数组并替换,会涉及到数组的移动.如果不移动元素 ...