Vue.js火速上手第六章——v-model在其他元素及类型上的用法

本文链接：https://blog.csdn.net/tangdaren2/article/details/106695927

一、v-model在input标签中单选框的使用

在单选框type="radio"中的使用

		<div id="app">
		<label>
			北京
			<input type="radio" value="北京" v-model="location"/>
		</label>
		<label>
			沈阳
			<input type="radio" value="沈阳" v-model="location"/>
		</label>
		<label>
			大连
			<input type="radio" value="大连" v-model="location"/>
		</label>
		<h1>{{location}}</h1>
		</div>

var app=new Vue({
		el: '#app',
		data:{
			location:'大连',
		},
});

初始效果：

点击了“沈阳”选项后，效果如下：

二、v-model在input标签中多选框的使用

在复选框type="checkbox"中的使用

		<label>
			北京
			<input type="checkbox" value="北京" v-model="location"/>
		</label>
		<label>
			沈阳
			<input type="checkbox" value="沈阳" v-model="location"/>
		</label>
		<label>
			大连
			<input type="checkbox" value="大连" v-model="location"/>
		</label>
		<h1>{{location}}</h1>

由于是多选框，所以location变量要定义为一个数组，我们设定初始值为“沈阳”

var app=new Vue({
		el: '#app',
		data:{
			location:['沈阳'],
		},
});

初始效果如下：

再选上“大连”、“北京”

三、 v-model在textarea中的使用

		<textarea v-model="state"></textarea>
		<p>{{state}}</p>

var app=new Vue({
		el: '#app',
		data:{
			state:'this is the end of the story',
		},
});

初始效果：

修改内容时，外部同步修改

四、 v-model在下拉框中的使用

	<select v-model="food">
			<option value="1">凉皮</option>
			<option value="2">拌面</option>
			<option value="3">盖饭</option>
			<option value="4">麻辣烫</option>
		</select>
		<p>{{food}}</p>

var app=new Vue({
		el: '#app',
		data:{	
			food: 4,
		},
});

初始效果：

做了选择后，效果如下：

五、 v-model在多选下拉框中的使用

		<select v-model="drink" multiple>
			<option value="1">可乐</option>
			<option value="2">雪碧</option>
			<option value="3">芬达</option>
			<option value="4">醒目</option>
		</select>
		<p>{{drink}}</p>

var app=new Vue({
		el: '#app',
		data:{
			drink: [],
		},
});

初始效果：

选择了其中的三个后：

六、本篇完整代码

main.js

var app=new Vue({
		el: '#app',
		data:{
			location:['沈阳'],
			state:'this is the end of the story',
			food: 1,
			drink: [],
		},
});

index.html

<html >
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>chapter18.5</title>
	</head>
	<body>		
		<div id="app">
		<label>
			北京
			<input type="checkbox" value="北京" v-model="location"/>
		</label>
		<label>
			沈阳
			<input type="checkbox" value="沈阳" v-model="location"/>
		</label>
		<label>
			大连
			<input type="checkbox" value="大连" v-model="location"/>
		</label>
		<h1>{{location}}</h1>
		
		
		<textarea v-model="state"></textarea>
		<p>{{state}}</p>
		
		
		<select v-model="food">
			<option value="1">凉皮</option>
			<option value="2">拌面</option>
			<option value="3">盖饭</option>
			<option value="4">麻辣烫</option>
		</select>
		<p>{{food}}</p>
		
		
		<select v-model="drink" multiple>
			<option value="1">可乐</option>
			<option value="2">雪碧</option>
			<option value="3">芬达</option>
			<option value="4">醒目</option>
		</select>
		<p>{{drink}}</p>
		</div>
		<script src="lib/vue.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>