表单 + v-model

A､作用

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

B､基本用法

1、input + textarea

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

<!--我是多行文本的初始化值 不会显示了，显示内容是 msg 的内容 -->
<textarea name="" id="" cols="30" rows="2" v-model="msg">我是多行文本的初始化值</textarea> 
{{ msg }}

2、单选按钮

2.1､单个单选框

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

<input type="radio" v-bind:checked = "oneradio">

2.2､多个单选框

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

//html    给name值表示多个单选项，只能选择一个 
单选1<input type="radio" name="checks" value="单选1" v-model="checkname"><br>
单选2<input type="radio" name="checks" value="单选2" v-model="checkname"><br>
单选3<input type="radio" name="checks" value="单选3" v-model="checkname"><br>
<br>
现在选中的是 {{ checkname }}

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

3、复选框

3.1､单个复选框

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

单个复选框(v-bind表示)：<input type="checkbox" v-bind:checked="oneradio"> <br>
单个复选框(v-model表示)：<input type="checkbox" v-model="oneradio">

3.2､多个复选框

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

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

//html
多个复选框 <br>
选项1<input type="checkbox" value="选项1" v-model="checks">
选项2<input type="checkbox" value="选项2" v-model="checks">
选项3<input type="checkbox" value="选项3" v-model="checks">
<br>
现在选中的是 {{ 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
<select v-model="selected">
        <option value="选项1">选项1</option>
        <option value="选项2">选项2</option>
        <option value="选项3">选项3</option>
</select>
<br>
现在选中的是 {{ 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值
<input type="radio" v-model="picked" v-bind:value="value">{{picked}}

2､复选框

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

//html  
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
{{toggle}} <br>
选中：{{ toggle == value1}} <br>
没选中： {{ toggle == value2}}
//js
...
data:{
    toggle: true,
    value1: '选中啦',
    value2: '没有选中啦'   
} // 选中和没选中时的value值不一样

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

//html
<select v-model="valueSele" :value="{num:123}"> 
  <option value="list1">list1</option>
  <option value="list2">list2</option>
  <option value="list3">list3</option>
</select>
{{typeof valueSele}}----{{ valueSele }}

// 若把 :value="{num:123}"动态绑定到option上
<select v-model="valueSele"> 
  <option value="list1" :value="{num:123}">list1</option>
</select>

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

D、修饰符

1､lazy

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

<input type="text" v-model.lazy="msg">{{msg}} // 敲回车或在失去焦点后渲染

2､number

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

<input type="text" v-model.number="value">{{typeof value}}

3､trim

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

<input type="text" v-model.trim='value'>{{value.split('').length}}

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

表单 + v-model

A､ 作用

B､基本用法

C、绑定值

D、修饰符

A､作用