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 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器. 当需要在数据变化时执行异步或开销较大的操作时,这 ...
随机推荐
- 英语单词composing
composing 来源——书籍Python.Crash.Course.2015.11 Using Individual Values from a List You can use individu ...
- Selenium-Switch与SelectApi介绍
Switch 我们在UI自动化测试时,总会出现新建一个tab页面,弹出一个浏览器级别的弹框或者是出现一个iframe标签,这时我们用WebDriver提供的Api接口就无法处理这些情况了.需要用到Se ...
- maven 几个命令的用法
进入到项目目 前 cd E:\workspace\foen_api(如切换不了目录) 直接E:\workspace\foen_api mvn clean 清理 mvn install 安装 mvn t ...
- Word文档粘贴到帝国CMS
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- [CF959C]Mahmoud and Ehab and the wrong algorithm
解法 很简单对于n<=5举不出反例 如果n>5的话2,3,4好点连1,其他点连2 对于正面例子 直接所有点连1号点 其实就是结论题 代码: #include <cstdio> ...
- Unity 中使用预编译指令区分平台
在实际项目开发过程中,我们经常会根据平台来写一些逻辑 #if UNITY_EDITOR #elif UNITY_IPHONE #elif UNITY_ANDROID #endif 使用预编译指令能很好 ...
- 提取的js,要先部署在远程,再引入
var meet = { _w: document.documentElement.clientWidth, _h: document.documentElement.clientWidth, ini ...
- php面试专题---16、MySQL创建高性能索引考点
php面试专题---16.MySQL创建高性能索引考点 一.总结 一句话总结: 注意:只写精品 1.索引的基础? 类似书籍的目录:索引类似于书籍的目录,要想找到一本书的某个特定主题,需要先查找书的目录 ...
- WCF Error Handling
https://docs.microsoft.com/en-us/dotnet/framework/wcf/wcf-error-handling The errors encountered by a ...
- WebService-.Net：添加web引用和添加服务引用有什么区别？
ylbtech-WebService-.Net:添加web引用和添加服务引用有什么区别? 1.返回顶部 1. 添加web引用和添加服务引用有什么区别,Add Service References 和 ...