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 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器. 当需要在数据变化时执行异步或开销较大的操作时,这 ...
随机推荐
- WEB前端开发的思考与感悟
当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了. 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过 ...
- 顺序表 C++ 类模板实现
顺序表的C++语言描述 基本运算的算法——置空表.求表的长度.取结点.定位运算.插入运算.删除运算.建立顺序表.输出顺序表 #include <iostream>using namespa ...
- CTF_知识点网址收藏
杂项 图片 python lsb.py extract big.png-stego.png3.txt详解 : https://www.4hou.com/technology/2515.html :h ...
- Layui数据表格/搜索重加载/分条件操作/工具条监听
<div class="layui-layout layui-layout-admin" style="padding-left: 20px;"> ...
- p4899 [IOI2018] werewolf 狼人
分析 我用的主席树维护qwq 代码 #include<iostream> #include<cstdio> #include<cstring> #include&l ...
- docker 部署 tomcat
1.搜索tomcat信息 docker search tomcat 2.下拉tomcat 镜像 docker pull tomcat 3.运行tomcat docker run -d --name=t ...
- day28-Javascript定时器的应用案例
转行学开发,代码100天——2018-04-13 上篇文章中记录了定时器的用法,本篇通过两个常用案例进一步巩固定时器的应用. 案例一:消息框延时,如QQ中鼠标移动到头像,弹出一个信息框:移出后,消息框 ...
- win2019
slmgr /upkslmgr /ipk N69G4-B89J2-4G8F4-WWYCC-J464Cslmgr /skms zh.us.toslmgr /ato
- PyTestReport使用
PyTestReport详细介绍: https://testerhome.com/opensource_projects/78 示例代码 #coding:utf-8 import os,unittes ...
- StringOfChar 将一个字符重复多次 形成一个 字符串
StringOfChar Returns a string with a specified number of repeating characters. In Delphi code, Strin ...