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

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

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

		

		
			北京
			
		
		
			沈阳
			
		
		
			大连
			
		
		
{
    {location}}
		

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

初始效果：

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

  

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

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

		
			北京
			
		
		
			沈阳
			
		
		
			大连
			
		
		
{
    {location}}

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

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

 

初始效果如下：

 

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

三、 v-model在textarea中的使用

		
		
{
    {state}}

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

初始效果：

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

 

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

	
			凉皮
			拌面
			盖饭
			麻辣烫
		
		
{
    {food}}

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

初始效果：

做了选择后，效果如下： 

 

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

		
			可乐
			雪碧
			芬达
			醒目
		
		
{
    {drink}}

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

	
	    
		
	
			
		

		
			北京
			
		
		
			沈阳
			
		
		
			大连
			
		
		
{
    {location}}
		
		
		
		
{
    {state}}
		
		
		
			凉皮
			拌面
			盖饭
			麻辣烫
		
		
{
    {food}}
		
		
		
			可乐
			雪碧
			芬达
			醒目
		
		
{
    {drink}}