表单控件绑定

基础语法

• v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

• v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。

    
    
    
    
         
     
Message is: {
   { message }}
    

 //引用vue

    Multiline message is:
{
   { message }}

    One
Two
Picked: {
   { picked }}

      A  B  CSelected: {
   { selected }}

多选框需要有一个数组存放选项值

JackJohnMike
Checked names: {
   { checkedNames }}

new Vue({  el: '...',    data: {    checkedNames: []  //需要有一个数组存放选项值   }})

多选列表

  A  B  C
Selected: {
   { selected }}

输出的话如果不做处理,默认是输出一个数组,一个选项为一个数组元素,例如["A","B"]

动态选项

     
           {
   { option.text }}  Selected: {
   { selected }}

new Vue({  el: '...',  data: {    selected: 'A',    options: [      { text: 'One', value: 'A' },      { text: 'Two', value: 'B' },      { text: 'Three', value: 'C' }    ]  }}) Selected: A

1. 首先v-for循环是遍历options数组,每一项是一个对象option,里面有text和value属性

2. 然后将该DOM元素的value值绑定为option的value值,那么vue就会使用这个value值作为每一个选项的值(v-model并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值)

3. 那么,遍历输出了3个选项,每个选项的value都是option.value,所以实现了生成动态选项的目的,相当于做了映射,通过一个value值

绑定value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值)即绑定的是html元素的value值

    
    
      ABC

有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

var app2 = new Vue({        el: '#ooo',        data: {            toggle: '', // 默认设置是'',勾选之后因为会切换到true-value的值,所以结果是true(按顺序切换)            a: true,            b: false        }    })

//验证:在chrome dev tools的console//页面打开初始化app2.toggle""//没勾选app2.togglefalse//已勾选app2.toggletrue

1. 当页面打开初始化的时候,是空字符串""

2. 当勾选的时候,vue会按顺序切换到绑定的值上面,true-value是排在前的,所以会切换到使用这个值,然后这个值对应的是a的true

3. 当没勾选的时候,vue会切换到false-value,所以是b的false

    
    
             
              
              123    
    

var app2 = new Vue({        el: '#ooo',        data: {            selected:[]         }    })

//初始化的时候app2.selected[]//当选中的时候,输出是一个对象,所以需要再次调用对象的属性才能获取值app2.selectedObject {__ob__: Observer}__ob__: Observernumber: (...)get number: reactiveGetter()set number: reactiveSetter(newVal)__proto__: Object//当选中的时候app2.selected.number123

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据,即输入内容就会处理内容(除了上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步,即输入完成后才出发事件处理：

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：