Vue监听属性

最新推荐文章于 2025-10-12 10:59:24 发布

原创最新推荐文章于 2025-10-12 10:59:24 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍在Vue.js中如何使用watch特性来监听特定属性的变化，并实时更新数据。通过实例演示了当输入框中的firstname或lastname发生变化时，自动更新全名的方法。

在Vue.js中可以使用watch监听属性的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="vue.js"></script>
		<div id="message">
		<input type="text" v-model="firstname"/>
		<input type="text" v-model="lastname"/>
		<p>全名为{{fullname}}</p>
		</div>
		<script>
			var app = new Vue({
				el:"#message",
				data:{
					firstname:"海王",
					lastname:"满",
					fullname:""
				},
				watch:{
					firstname(){ //监听firstname，改变时会触发下面的函数，即将姓氏和名字拼接在一起并赋值给全名
						this.fullname = this.firstname + this.lastname
					},
					lastname(){  //监听lastname，改变时会触发下面的函数，即将姓氏和名字拼接在一起并赋值给全名
						this.fullname = this.firstname + this.lastname
					}
				}
			}
		)
		</script>
	</body>
</html>