表单控件绑定

基本用法

你可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
v-model会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的data选项中声明初始值。

  • 更新文本:

Message is: {{ message }}

  • 多行文本:
Multiline message is:

{{ message }}


在文本区域插值( ) 并不会生效,应用 v-model 来代替。

  • 单个勾选框,逻辑值:


  • 多个勾选框,绑定到同一个数组:







Checked names: {{ checkedNames }}
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})
  • 单选按钮:


Picked: {{ picked }}
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})
  • 选择列表:

单选:

Selected: {{ selected }}
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

多选列表(绑定到一个数组):


Selected: {{ selected }}
new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})
  • 动态选项,用v-for配合渲染:

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

绑定value:

对于单选按钮,勾选框及选择列表选项,v-model绑定的 value 通常是静态字符串(对于勾选框是逻辑值):







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

  • 勾选框
var app = new Vue({
    el: '#app',
    data: {
        checked: ' ',
        a: '666',   
        b: '777'
    }
})
  • 单选按钮

你可能感兴趣的:(表单控件绑定)