vue 侦听器之详解应用场景-watch

最新推荐文章于 2024-05-03 16:31:49 发布

俗世凡人行

最新推荐文章于 2024-05-03 16:31:49 发布

阅读量1.3k

点赞数

分类专栏： Vue 文章标签：侦听器 watch

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107594575

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

vue 侦听器

Vue提供了一种更通用的方法来观察和响应Vue实例上的数据变动: 侦听属性:watch;
当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的;比如注册;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <input type="text" v-model="msg"  /><br> -->
			<!-- <p>展示:{{msg}}</p> -->
			<!-- 下面这种侦听器比上面那种适用场景更多,当msg变化,触发侦听器里面函数 -->
			<!-- <p>展示:{{newMsg}}</p> -->
			<!-- v-model是时时的,一般要输入完之后才发生比较好,加修饰符.lazy -->
			用户名:<input type="text" v-model.lazy="name"  /><span :style="infoStyle">{{info}}</span><br>
			<!-- 密码:<input type="text" v-model="name"  /><br> -->
		</div>
	</body>
</html>
<script type="text/javascript">	
	var vm = new Vue({	
		el:'#app',
		data:{	
			msg:'hello vue',
			newMsg:'',
			name:'',
			info:"",
			infoStyle:"",
			
		},
		watch:{
			msg:function(){
				this.newMsg = this.msg+'watch'
			},
			name:function(){
				//发送ajax请求到后台数据库
				
				if(this.name == "nice"){
					this.info="此用户已注册";
					this.infoStyle={color:'red'}
				}else{
					this.info="可以注册";	
					this.infoStyle={color:'blue'}
				}
			}			
		}		
		
	})	
	
</script>