<vue 基础知识 9、v-model使用 input、radio、checkbox、select、修饰符>

代码结构

 

 

一、     01-v-model的基本使用

Vue中使用v-model指令来实现表单元素和数据的双向绑定

1、效果  

 

 

2、代码

01-v-model的基本使用.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			 <input type="text" v-model="message" >
			
			 <input type="password"   v-model="pwd" >
		</div>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message: '你好',
					pwd:''
				}
			})
		</script>

	</body>
</html>

 

二、     02-v-model结合radio类型

1、 效果

 

 

2、代码

02-v-model结合radio类型.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<label for="male">
				<input type="radio" id="male" value="男" v-model="sex">男
			</label>
			<label for="female">
				<input type="radio" id="female" value="女" v-model="sex">女
			</label>
			<h2>选择的性别是: {{sex}}</h2>
		</div>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					sex: '女'
				}
			})
		</script>

	</body>
</html>

 

三、03-v-model结合checkbox类型

1、效果

 

2、代码

03-v-model结合checkbox类型.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<input type="checkbox" value="篮球" v-model="hobbies">篮球
			<input type="checkbox" value="足球" v-model="hobbies">足球
			<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
			<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
			<h2>爱好是: {{hobbies}}</h2>
		</div>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: { 
					hobbies: [] 
				}
			})
		</script>

	</body>
</html>

 

 

四、04-v-model结合select类型

1、效果

注：下面的多选框需要按住ctrl多选

 

2、代码

04-v-model结合select类型.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<!--1.选择一个-->
			<select name="abc" v-model="fruit">
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="榴莲">榴莲</option>
				<option value="葡萄">葡萄</option>
			</select>
			<h2>您选择的水果是: {{fruit}}</h2>

			<!--2.选择多个-->
			<select name="abc" v-model="fruits" multiple>
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="榴莲">榴莲</option>
				<option value="葡萄">葡萄</option>
			</select>
			<h2>您选择的水果是: {{fruits}}</h2>
		</div>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					fruit: '香蕉',
					fruits: []
				}
			})
		</script>

	</body>
</html>

 

五、05-v-model修饰符的使用

1、效果

注：（1）当上面输入时只有光标离开输入框，下面的值才会改变。

   （2）只能输入数字

   （3）输入的内容去掉前后的空格

 

2、代码

05-v-model修饰符的使用.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<!--1.修饰符: lazy-->
			<input type="text" v-model.lazy="message">
			<h2>{{message}}</h2>


			<!--2.修饰符: number-->
			<input type="number" v-model.number="age">
			<h2>{{age}}-{{typeof age}}</h2>

			<!--3.修饰符: trim-->
			<input type="text" v-model.trim="name">
			<h2>您输入的名字:{{name}}</h2>
		</div>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					age: 0,
					name: ''
				}
			})
		</script>

	</body>
</html>

 

 

 

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
posted @ 2021-11-19 16:26  万笑佛  阅读(636)  评论(1)    收藏  举报