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 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器. 当需要在数据变化时执行异步或开销较大的操作时,这 ...
随机推荐
- LINUX的一些基本概念和操作
LINUX和shell的关系: linux是核,是操作系统,用于分配软硬件资源,用于支持运行环境,shell是壳,是命令解析器. linux命令: linux命令行有一个输入输出的行为,输入命令,输出 ...
- CodeChef Max-digit Tree（动态规划）
传送门. 题解: 最主要的问题是如何判断一个数是否合法,这就需要发现性质了. 这个状态划分还是不太容易想到, 每次加的数\(∈[0,k)\),也就是个位一直在变变变,更高的位每次都是加一,这启发我们状 ...
- php中substr_compare()区分大小写吗
PHP substr_compare() 函数 定义和用法 substr_compare() 函数从指定的开始位置比较两个字符串. 提示:该函数是二进制安全且选择性地对大小写敏感(区分大小写). 语法 ...
- Linux CentOS7 安装docker
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口 ...
- 【Unity优化】Unity中究竟能不能使用foreach？
关于这个话题,网络上讨论的很多,我也收集了一些资料,都不是很齐全,所以自己亲自测试,这里把结果分享给大家. foreach究竟怎么了? 研究过这个问题的人都应该知道,就是它会引起频繁的GC Alloc ...
- laravel5.6 ORM 关联模型,一对一和一对多
Laravel5.6 关联模型的操作,主要是一对一,一对多,多对多等操作.下面示例主要解析前面两个操作用法比较常用.(操作和用法TP5类似)将关联查询使用语法hasOne.hasMany.belong ...
- CDN：分类
ylbtech-CDN:分类 1.返回顶部 1. bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 2. feather-icon ...
- cts-verifier测试流程
测试目的: cts的补充测试,可以理解为没法自动化的cts测试,这个是人工测试. 测试前提: 1.发货user版本 2.selinux:Enable 5.外网环境 设备需求: 2个待测设备:1个手机或 ...
- poj1163The Triangle(动态规划，记忆化搜索)
7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 (Figure 1) Figure 1 shows a number triangle. Write a program that calc ...
- 泛微e-cology OA Beanshell组件远程代码执行漏洞复现CNNVD-201909-1041
靶机 影响版本 泛微e-cology<=9.0 https://github.com/jas502n/e-cology 部署 复现 /weaver/bsh.servlet.BshServlet ...