Vue之v-model

最新推荐文章于 2023-05-24 10:59:15 发布

Mr.ZKH

最新推荐文章于 2023-05-24 10:59:15 发布

阅读量370

点赞数

分类专栏： Vuejs

本文链接：https://blog.csdn.net/weixin_44415461/article/details/96901978

版权

Vuejs 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

v-model.lazy 失去焦点时触发
v-model.number 输入的是整型，不需要parseInt()进行转换
v-model.trim 去空格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-model双向数据绑定</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>
			原始文本:{{message}}
		</p>
		<h3>文本框</h3>
		<p>
			v-model:<input type="text" v-model="message">
		</p>
		<p>
			v-model.lazy:<input type="text" v-model.lazy="message">
		</p>
		<p>
			v-model.number:<input type="text" v-model.number="message">
		</p>
		<p>
			v-model.trim:<input type="text" v-model.trim="message">
		</p>
		<h3>复选框</h3>
		<p>
			<input type="checkbox" id="focus" v-model="bool">
			<label for="focus">{{bool}}</label>
		</p>
		<h3>单选框</h3>
		<p>
			<input type="radio" id="one" value="true" v-model="btn">
			<label for="one">true</label>
			<input type="radio" id="two" value="false" v-model="btn">
			<label for="two">false</label>
		</p>
		<p>
			{{btn}}
		</p>
		<hr />
		<h3>多个复选框绑定一个数组</h3>
		<p>
			<input type="checkbox" id="jack" value="jack" v-model="arr">
			<label for="jack">jack</label><br/>
			<input type="checkbox" id="john" value="john" v-model="arr">
			<label for="john">john</label><br/>
			<input type="checkbox" id="mike" value="mike" v-model="arr">
			<label for="mike">mike</label>
		</p>
		<p>
			{{arr}}
		</p>
		<h3>下拉列表</h3>
		<p>
			<select v-model="array" > <!-- 表示多选multiple -->
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
		</p>
		<p>
			{{array}}
		</p>
	</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: 'hello world',
			bool: true,
			btn: '',
			arr: [],
			array: []
		}
	})
</script>
</html>

运行效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-model

v-model.lazy 失去焦点时触发v-model.number 输入的是整型，不需要parseInt()进行转换v-model.trim 去空格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model双向数据绑定</...
复制链接

扫一扫