Vue 侦听属性
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 侦听属性的更多相关文章
- 六、vue侦听属性
$watch 实际上无论是 $watch 方法还是 watch 选项,他们的实现都是基于 Watcher 的封装.首先我们来看一下 $watch 方法,它定义在 src/core/instance/s ...
- vue侦听属性和计算属性
监听movies,实现点击添加显示到li标签里面.页面效果如下: <template> <div> <div class="moive"> &l ...
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- [vue]计算和侦听属性(computed&watch)
先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- vue计算属性VS侦听属性
原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- Vue 侦听器 watch
1. 侦听器 watch Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器. 当需要在数据变化时执行异步或开销较大的操作时,这 ...
随机推荐
- 英语单词vendors
vendors 来源——https://www.docker.com/products/docker-hub Share and Collaborate with Docker Hub Docker ...
- Docker Toolbox 学习教程【转载】
最近在研究虚拟化,容器和大数据,所以从Docker入手,下面介绍一下在Windows下怎么玩转Docker.Docker本身在Windows下有两个软件,一个就是Docker,另一个是Docker T ...
- （转）Python3 zip() 函数
转:http://www.runoob.com/python3/python3-func-zip.html 描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返 ...
- 前端基础知识-----HTML
一.HTML基础概述 HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准语言.也就是一般我们在浏览器里看到的东西的书写格式,与 ...
- javascript-object对象属性操作之Object.defineProperty
一.基本用法简介 声明一个简单的对象,如下 var obj = { name: 'ldld' } 我们可以用Object.defineProperty来声明这个对象 var obj = {} Obje ...
- 【SD系列】SAP SD模块-销售收入科目的配置
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-销售收入科目的配置 ...
- Go-内存To Be
做一个快乐的互联网搬运工- 逃逸分析 逃逸分析的概念 在编译程序优化理论中,逃逸分析是一种确定指针动态范围的方法——分析在程序的哪些地方可以访问到指针. 它涉及到指针分析和形状分析. 当一个变量(或对 ...
- File类的相关方法
java.io.File类 文件和路径名的抽象表达形式 java把电脑中的文件和文件夹(目录)封装了一个File类,我们可以使用File类对文件和文件夹进行如下操作 创建一个文件/文件夹 删除 获取 ...
- python获取ip地址
#!/usr/bin/env python # -*- coding: utf-8 -*- import os import socket,fcntl,struct #crontab下shell命令无 ...
- stringstream流分割空格
1205 单词翻转 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 给出一个英语句子,希望你把句子里的单词顺序都翻转 ...