vue指令：v-model绑定表单控件；v-model与v-bind结合使用

 一、v-model绑定表单控件

v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将Vue实例的数据作为数据来源。

1. 单行文本框 input[type="text"] 、多行文本框 textarea

　 v-model值绑定到value属性；

 1 
 2    

 3       

 4       

 5    
 6    
 7    
16 

运行图：

2. 单选框 input[type="radio"]

 　 v-model 值绑定到 value属性；

 1 
 2    

 3       apple
 4       pear
 5       banana
 6       
radioValue: {{radioValue}}
 7    
 8    
 9    
17 

运行图： 

3. 多选框 input[type="checkbox"]

•  　 单个复选框：

 　　　　 v-model 值为布尔值（true、false），绑定到 checked属性；

 1 
 2    

 3       

 4       
checkValue: {{checkValue}}
 5    
 6    
 7    
15 

运行图：  

•      多个复选框

　　　　  v-model 值为数组，绑定到 value属性（checkbox的vulue属性值必须要有）；

 1 
 2    

 3       box1
 4       box2
 5       box3
 6       
moreCheck: {{moreCheck}}
 7    
 8    
 9    
17 

 运行图： 

 

二、v-model与v-bind结合使用

　　v-bind绑定属性，例如 v-bind:class="className"，缩写为 :class="className"；

 1 //结合v-bind和v-model，实现效果：修改select选中值，从而给div绑定不同的类名，进而改变div的字体颜色；
 2 
 7 
 8    

 9       
这是一行会变色的字
10       
11          blue
12          red
13          green
14       
15    
16    
17    
25 

 

 运行图： 

 

转载于:https://www.cnblogs.com/anyxl/p/10722166.html