Vue.js入门-5-表单输入绑定

 

Vue.js入门-5-表单输入绑定

基础用法

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

文本


Message is: { { message } }

多行文本

Multiline message is:

{ { message } }


复选框

单个复选框,绑定到布尔值:



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


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

单选按钮

v-model 绑定的值为 value。One 或者 Two



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

选择框

v-model绑定的值,在选中的情况下为 option的value

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'  }
    ]
   }
 })

值绑定

对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):









**把值绑定到 Vue 实例的一个动态属性上,这时可以用 `v-bind` 实现**

复选框



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

单选按钮



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

选择框的选项



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

修饰符

.lazy

默认情况下,v-model在input事件中同步输入框的值和数据。但可以添加一个修饰符`lazy`,从而转变为`change`事件中同步



.number

如果想自动将用户的输入值转为数值类型,可以给 `v-model` 添加 `number `修饰符:如果转换不成功则返回原值。


.trim

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


本站所有文章均来自互联网,如有侵权,请联系站长删除。极客文库 » Vue.js入门-5-表单输入绑定
分享到:
赞(0)

评论抢沙发

评论前必须登录!