你可以用 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
对于单选按钮，勾选框及选择列表选项， 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在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
如果你还不熟悉Vue的组件，跳过这里即可。
HTML 内建的 input 类型有时不能满足你的需求。还好，Vue 的组件系统允许你创建一个具有自定义行为可复用的 input 类型，这些 input 类型甚至可以和 v-model 一起使用！要了解更多，请参阅“自定义 input 类型”。
当前名称：创新互联VUE2教程：Vue.js2.0表单控件绑定
标题URL：http://www.hantingmc.com/qtweb/news34/260134.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
猜你还喜欢下面的内容