Vue学习(一）--表单元素的用法

                                          表单元素的输入绑定

一、概念：你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。</p> <p>二、表单元素绑定方法示例：</p> <p> (1)输入文本框：<input v-model="name" placeholder="请输入用户名"></p> <p> (2)输入大本文框：<textarea v-model="personDescri" placeholder="请输入简历描述">

 (3)多个复选框（绑定到数组）：

 

  体育
 
  唱歌
 
  跳舞
 

  所选值: {{ checkedNames }}

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

})

（4）单选框

 
  One
 

 
  Two
 

  Picked: {{ picked }}

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

})

(5）下拉单选：

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

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

})

（6）下拉多选：

 
    A
    B
    C
 
 

  Selected: {{ selected }}

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

})

 

用 v-for 渲染的动态选项：


 
    {{ option.text }}
 

Selected: {{ selected }}

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

})

（其它）修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：




.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：



这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
.trim

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