Vue——第九节：表单输入绑定

最新推荐文章于 2023-07-25 17:19:48 发布

lxl。。

最新推荐文章于 2023-07-25 17:19:48 发布

阅读量189

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/lxl513513/article/details/105519951

版权

基础用法：

使用v-model指令在表单<input>、<textarea>及 <select> 元素上创建双向数据绑定。v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

修饰词

.lazy:在默认情况下，v-model在每次 input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
.number:如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。
.trim:如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<p>{{username}}</p> <!-- 数据的双向绑定-->
			<h3>单行文本输入框</h3>
			<input type="text" name="username" v-model.lazy.trim="username" id="" value="" />
			<h3>多行文本输入框</h3>
			<textarea rows="" cols="" v-model="username"></textarea>
			
			<h3>复选框:选择喜欢的水果</h3>
			<span v-for="item in fruits">
				{{item}}
			<input type="checkbox" name="fruit" v-model="checkFruits" id="" :value="item" />
		    </span>
			<h4>{{checkFruits}}</h4>
			
			<h3>单选框:选择你最喜欢的水果</h3>
			<span v-for="item in fruits">
				{{item}}
			<input type="radio" name="zfruit" v-model="radioFruits" id="" :value="item" />
			</span>
			<h4>{{radioFruits}}</h4>
			
			<h3>选项框：选择你居住的城市</h3>
			<select v-model="chooseCity">
				<option disabled="" value =""></option>
				<option  v-for="item in city" :value ="item">{{item}}</option>
			</select>
			<h4>{{chooseCity}}</h4>
			
			<h3>选项框：选择你喜欢的城市</h3>
			<select v-model="moreCity" multiple="multiple">
				<option  v-for="item in city" :value ="item">{{item}}</option>
			</select>
			<h4>{{moreCity}}</h4>
	
			<!-- 修饰词 -->
			<h3>将字符串变成数字获得</h3>
			<input type="number" name="age" v-model:number="age" id="" value="" />
		</div>
		
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					username:"小明",
					fruits:['苹果','雪梨','香蕉','葡萄'],
					checkFruits:[],
					radioFruits:[],
					city:['北京','上海','深圳','广州'],
					chooseCity:"",
					moreCity:[],
					age:16
				},
				watch:{
					age:function(val){
						console.log(val)
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

在这里插入图片描述

lxl。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——第九节：表单输入绑定

基础用法：使用v-model指令在表单<input>、<textarea>及 <select> 元素上创建双向数据绑定。v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：text 和 ...
复制链接

扫一扫