本文共 1795 字，大约阅读时间需要 5 分钟。

基础用法

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

绑定text

Message is: {
  { message }}

绑定textarea

Multiline message is:
{
  { message }}
//在文本区域插值 () 并不会生效，应用 v-model 来代替。

绑定checkbox

单个复选框

//html{
  { checked }}

多个复选框

//html
   
  
      
    Jack  
      
    John  
      
    Mike  
    
  
    Checked names: {
  { checkedNames }}
   

/*javascript*/new Vue({
     el: '#example-3',  data: {
       checkedNames: []  }})

```html```javascript// 当选中时vm.toggle === 'yes'// 当没有选中时vm.toggle === 'no'

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。

绑定radio

//html
   
  
      
    One  
    
  
      
    Two  
    
  
    Picked: {
  { picked }}
   

/*javascript*/new Vue({
     el: '#example-4',  data: {
       picked: ''  }})

//html

/*javascript*/// 当选中时vm.pick === vm.a

绑定select

单个select

//html
   
  
        请选择    A    B    C    
    Selected: {
  { selected }}
   

/*javascript*/new Vue({
     el: '...',  data: {
       selected: ''  }})

多个select

//html
   
  
        A    B    C    
    
  
    Selected: {
  { selected }}
   

/*javascript*/new Vue({
     el: '#example-6',  data: {
       selected: []  }})

//html    
      123

// 当选中时typeof vm.selected // => 'object'vm.selected.number // => 123

v-for渲染

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

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

绑定value

//html
   
   
     ABC

转载地址：https://pandora.blog.csdn.net/article/details/88093627 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！