vue基础复习-课时09

目录

表单输入

模板语法

表单输入

双向绑定

单行文本

Message is: {{ message }}

多行文本

Multiline message is:
{{ message }}

单复选框

{{ checked }}

多复选框

  
  Jack
  
  John
  
  Mike
  

  Checked names: {{ checkedNames }}

data: {
    checkedNames: []
  }

单选按钮

  
  One
  

  
  Two
  

  Picked: {{ picked }}

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

单选择框

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

data: {
    selected: ''
  }

多选择框

 
    A
    B
    C
  
  

  Selected: {{ selected }}

data: {
    selected: []
  }

用 v-for 渲染的动态选项

  
    {{ option.text }}
  

Selected: {{ selected }}

data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }

值的绑定

v-model 绑定的值通常是静态字符串。

复选框

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

单选按钮

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

选择框

    
  123

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

修饰符lazy-使用 change 事件进行同步

修饰符number-自动将用户的输入值转为数值类型

修饰符trim-自动过滤用户输入的首尾空白字符