表单 + v-model

A､ 作用

表单类元素上双向绑定事件

B､基本用法

1、input + textarea

所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value

我是多行文本的初始化值 
{{ msg }}

2、单选按钮

2.1､ 单个单选框

只能用v-bind，而v-model 不管用

2.2､ 多个单选框

如果是多个单选框，一定要v-­model来绑定，绑定选中的单选框的value值，此处所绑定的初始值可以随意给

//html    给name值表示多个单选项，只能选择一个 
单选1

单选2

单选3



现在选中的是 {{ checkname }}

//js
...
data:{
        value: '',
        msg: '',
        oneradio: false,
        checkname: '单选1' // 此处所绑定的初始值可以随意给
}    

3、复选框

3.1､单个复选框

直接用定一个布尔值，可以用v­-mode 或 v­-bind

单个复选框(v-bind表示)： 

单个复选框(v-model表示)：

3.2､多个复选框

需要v­-model来配合value使用 + v­-model绑定一个数组

注：如果绑定的是字符串，则会转化为true或false，与所有绑定的复选框的checked属性相对应

//html
多个复选框 

选项1
选项2
选项3


现在选中的是 {{ checks }}

//js
...
data:{
        value: '',
        msg: '',
        oneradio: true,
        checkname: '单选1',
        checks: '' // 绑定的是字符串，则会转化为true或false
        checks: [] // 绑定的是数组，含有选中的复选框的value值的一个数组
}    

4､ 下拉框

4.1､ 如果是单选，所绑定的value值初始化可以为 数组 或 字符串，结果是转化为所选定项的value值

注： 有value直接优先匹配一个value值，没有value就匹配一个text值

4.2､ 如果是多选，需要v­-model来配合value使用，v­-model绑定一个数组，与复选框类似

4.3､ v­-model一定是绑定在select标签上

//html

        选项1
        选项2
        选项3



现在选中的是 {{ selected }}

//js
...
data:{
        value: '',
        msg: '',
        oneradio: true,
        checkname: '单选1',
        checks: [],
        selected:''，// value 值为字符串可以
        selected:[] // value 值为数组也可以
 }    

小总结：

1､如果是单选，初始化最好给定字符串，因为v­-model此时绑定的是静态字符串或者布尔值

2､如果是多选，初始化最好给定一个数组

C、绑定值

1､ 单选按钮

v­-bind给单个单选框绑定一个value值，此时，v­-model绑定的就是他的value值

//v-model对单个单选框不生效，但是给单选按钮动态绑定一个value值，就能通过v-model获取它的value值
{{picked}}

2､复选框

通过true-value、false-value 去绑定value值，v­-model绑定的就是他的value值

//html  

{{toggle}} 

选中：{{ toggle == value1}} 

没选中： {{ toggle == value2}}
//js
...
data:{
    toggle: true,
    value1: '选中啦',
    value2: '没有选中啦'   
} // 选中和没选中时的value值不一样

3､下拉框
在select标签上，v-model绑定的是option上的value值，绑定value值对option并没有影响

//html
 
  list1
  list2
  list3

{{typeof valueSele}}----{{ valueSele }}

// 若把 :value="{num:123}"动态绑定到option上
 
  list1


//js
...
data:{
    valueSele:''   
}

D、修饰符

1､lazy

v­-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新

{{msg}} // 敲回车或在失去焦点后渲染

2､number

将输入 的字符串转化为number类型

{{typeof value}}

3､trim

自动过滤输入过程中首尾输入的空格

{{value.split('').length}}

【Demo 实例 https://jsbin.com/fabuqey/edit?html,output】