013_Vue监听器

最新推荐文章于 2024-11-05 10:16:01 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-11-05 10:16:01 发布

阅读量87

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122880489

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue.js中监听器（watch）的使用，包括在数据变化时执行异步操作和实时更新视图的场景。通过一个实例展示了如何监听firstName和lastName属性，动态更新fullName，并实现用户名验证功能。同时，文章还探讨了计算属性（computed）与监听器的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 监听器的应用场景

1.1. 数据变化时执行异步或开销比较大的操作。

1.2. 监听器用法

watch: {
	// 监听firstName的值的变化
	firstName: function(val){
		this.fullName = val + "" + this.lastName;
	}
}

2. 监听器例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>监听器</title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>姓: </span><input type="text" v-model="firstName" />
			</div>
			<div>
				<span>名: </span><input type="text" v-model="lastName" />
			</div>
			<div>{{fullName}}</div>
			<div>{{computedFullName}}</div><hr />

			<div>
				<span>用户名:</span>
      			<span><input type="text" v-model.lazy='userName' /></span>
      			<span>{{tip}}</span>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					firstName: "",
					lastName: "",
					fullName: "",
					userName: "",
					tip: ""
				},
				methods: {
					checkUserName: function(userName){
						var me = this;

						setTimeout(function(){
							if(userName == "zhangsan"){
								me.tip = "用户名已经存在, 请换一个..."
							}else{
								me.tip = "用户名可用..."
							}
						}, 2000);
					}
				},
				computed: {
					computedFullName: function(){
						var value = this.firstName + this.lastName;
						console.log(value)
						return value;
					}
				},
				watch: {
					firstName: function(val){
						this.fullName = val + "" + this.lastName;
					},
					lastName: function(val){
						this.fullName = this.firstName + val;
					},
					userName: function(val){
						this.checkUserName(val);
						this.tip = "正在验证...";
					}
				}
			});
		</script>
	</body>
</html>

2.2. 效果图