Vue学习--表单输入绑定

最新推荐文章于 2024-04-13 13:23:31 发布

奔跑的蜗牛.

最新推荐文章于 2024-04-13 13:23:31 发布

阅读量386

点赞数

分类专栏：前端学习汇总文章标签：大数据

本文链接：https://blog.csdn.net/MrWangisgoodboy/article/details/125601371

版权

前端学习汇总专栏收录该内容

23 篇文章 0 订阅

订阅专栏

input框实现数据的双向绑定

1、使用v-model指令在表单input元素创建数据绑定，绑定的属性名为message
2、注册el对象的app属性，绑定在div元素上
3、注册data对象的message属性，注册时默认值为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<body>
			<div id="app">
				<!-- 1、使用v-model指令在表单input元素创建数据绑定，绑定的属性名为message -->
				<input v-model="message" placeholder="edit me">
				<p>Message is{{ message }}</p>
			</div>
		</body>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",//注册el对象的app属性，绑定在div元素上
				data:{//注册data对象的message属性，注册时默认值为空
					message: "",
					}
			});
		</script>	
	
</html>

显示结果：体现了v-model的双向绑定

多行文本框实现数据的双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<body>
			<div id="app">
				<!-- 1、使用v-model指令在表单input元素创建数据绑定，绑定的属性名为message -->		
				<textarea v-model="message2" placeholder="add multiple lines"></textarea>
				<p style="white-space: pre-line;">{{ message2 }}</p>
			</div>
		</body>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",//注册el对象的app属性，绑定在div元素上
				data:{//注册data对象的message属性，注册时默认值为空
					message2: "",
					}
			});
		</script>	
	
</html>

显示结果