Vue监听属性

最新推荐文章于 2024-04-18 14:33:53 发布

Submerge~

最新推荐文章于 2024-04-18 14:33:53 发布

阅读量273

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/MixedSignals/article/details/108217620

版权

在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>

在这里插入图片描述

Submerge~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue监听属性

在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="te
复制链接

扫一扫