自贡网站建设公司

创新互联VUE2教程：Vue.js2.0表单控件绑定

基础用法

你可以用 ​v-model​ 指令在表单​ ​、​

在JavaScript中

var app = new Vue({

  el: '#app',

  data: {

    message: ''

  }

})

运行结果：

尝试一下 »

注意：在文本区域插值( ) 并不会生效，应用​v-model​ 来代替。

复选框

单个复选框，绑定到布尔值：

多个勾选框，绑定到同一个数组：









Checked names: {{ checkedNames }}
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

单选按钮









Picked: {{ picked }}

One

Two

Picked:

选择列表

单选列表：

实例

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 » 


Selected: {{ selected }}

A  B  C 

Selected:

多选列表（绑定到一个数组）：

实例

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 » 




Selected: {{ selected }}

A B C

Selected: [ "C"]

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

实例

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 » 


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

       One             Two             Three      

Selected: A

绑定 value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

实例

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 »

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

复选框

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

单选按钮

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

选择列表设置

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

修饰符

.lazy

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

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

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

v-model 与组件

如果你还不熟悉Vue的组件，跳过这里即可。

HTML 内建的 input 类型有时不能满足你的需求。还好，Vue 的组件系统允许你创建一个具有自定义行为可复用的 input 类型，这些 input 类型甚至可以和 v-model 一起使用！要了解更多，请参阅“自定义 input 类型”。


文章标题：创新互联VUE2教程：Vue.js2.0表单控件绑定
网站网址：http://jxruijie.cn/article/cdgsgco.html

其他资讯