VUE之表单与v-model

最新推荐文章于 2023-10-31 17:33:55 发布

·Mr.zuo

最新推荐文章于 2023-10-31 17:33:55 发布

阅读量120

点赞数

分类专栏： vue javascript 文章标签： vue

本文链接：https://blog.csdn.net/zuomengjia/article/details/102573063

版权

v-model基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model
指令，用于在表单类元素上双向绑定数据。
例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单v-model基本用法</title>
		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="demo">
			<!-- v-model比value优先级高 -->
			姓名：<input type="text" name="user_name" v-model="your_name">
			您好,{
  {your_name}}
		</div>
	</body>
	<script type="text/javascript">
		var demo = new Vue({
			el:'.demo',
			data:{
				your_name:'',
			},
			methods:{
				
			},
			computed:{
				
			}
		})
	</script>
</html>

对于文本域 textarea 也是同样的用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单v-model基本用法</title>
		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="demo">
			<textarea v-model="pj">你好，世界</textarea>
		</div>
	</body>
	<script type="text/javascript">
		var demo = new Vue({
			el:'.demo',
			data:{
				pj:'',
			},
			methods:{
				
			},
			computed:{
				
			}
		})
	</script>
</html>

注意事项

①使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的 value属性（解耦初始化value属性）
②对于< textarea> 之间插入的值，不会生效

最低0.47元/天解锁文章

·Mr.zuo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE之表单与v-model

v-model基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model指令，用于在表单类元素上双向绑定数据。例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。<!DOCTYPE html><html> <head> <meta charset...
复制链接

扫一扫

专栏目录