Vue.js实战——表单与v-model

最新推荐文章于 2024-09-21 11:29:05 发布

Aran_

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量139

点赞数

分类专栏： # Vue基础文章标签： vue vue.js html5 javascript es6

本文链接：https://blog.csdn.net/Aran_/article/details/104793336

版权

本文介绍了Vue.js中v-model的实战应用，包括基本用法、绑定值的详细操作，如单选、复选框和选择列表的交互，并探讨了修饰符如.lazy、.number和.trim的用途，帮助开发者更好地理解和运用v-model进行表单数据管理。

摘要由CSDN通过智能技术生成

参考《Vue.js实战》梁灏

1. 基本用法

话不多说，来个入门：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单入门</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name">
			
			<p>您输入的是:{
  { name }}</p>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
    
				el:"#app",
				data:{
    
					name:''
				}
			});
		</script>
	</body>
</html>

输入中文时，如果想实时更新（好像没啥用），请将v-model改为@input:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>@input</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" @input="handleInput" placeholder="请输入...">
			<p v-cloak>输入的内容是：{
  { message }}</p>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
    
				el:"#app",
				data:{
    
					message:''
				},
				methods:{
    
					handleInput(event){
    
						this.message = event.target.value;
					}
				}
			});
		</script>
	</body>
</html>

单选按钮： 通过v-model和value实现互斥效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单选按钮</title

最低0.47元/天解锁文章

Aran_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录