v-model使用案例

最新推荐文章于 2024-03-07 16:49:21 发布

多哥仁慈的骆驼

最新推荐文章于 2024-03-07 16:49:21 发布

阅读量308

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36381640/article/details/103466902

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

代码：

<html>
<head>
	<script type="text/javascript" src="../js/vue.js"></script>
	<title>vue的值绑定、v-model修饰符</title>
</head>
<body>
	<!-- v-model使用案例 -->
	<div id="app1" style="width: 50%">
		<div>
			<font >请选择 ：{{ selects }}</font><br>
			<label v-for="item in numbers1"  >
				<input type="checkbox"  :value="item" :cls="item" v-model="selects">{{ item }}
			</label> 
		</div>
		<div>
			<!-- 懒加载 lazy默认敲回车的时候会绑定过去-->
			<font >v-model修饰符-->lazy ：{{ numbers }}</font> 
			<input type="text"  v-model.lazy="numbers" style="float: right">
		</div>
		<div>
			<!-- 数子框 number -->
			<font >v-model修饰符-->number ：{{ age }}</font> 
			<input type="text"  v-model.number="age" style="float: right">
		</div>
		<div>
			<!-- 去空格 trim -->
			<font >v-model修饰符-->trim ：{{ trim }}</font> 
			<input type="text"  v-model.trim="trim" style="float: right">
		</div>
	</div>
	<script type="text/javascript">
	var app1=new Vue({
		el:"#app1",
		data:{
			numbers:[],
			numbers1:['one','two',"three","four","six","seven","eight","nine","ten"],
			sex:"男",
			checkboxs:[],
			age:0,
			trim:"",
			selects:['one'],
		} 
	})
	</script> 
	</body>
	</html>