表单输入绑定 |
您所在的位置:网站首页 › VUE中文什么意思 › 表单输入绑定 |
表单输入绑定 在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦: templatev-model 指令帮我们简化了这一步骤: template另外,v-model 还可以用于各种不同类型的输入,、 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合: 文本类型的 和 元素会绑定 value property 并侦听 input 事件; 和 会绑定 checked property 并侦听 change 事件; 会绑定 value property 并侦听 change 事件。注意 v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项响应式系统的 API来声明该初始值。 基本用法 文本 templateMessage is: {{ message }}Message is: 在演练场中尝试一下 在演练场中尝试一下 注意 对于需要使用 IME 的语言 (中文,日文和韩文等),你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新,请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。 多行文本 templateMultiline message is: {{ message }} Multiline message is:在演练场中尝试一下 在演练场中尝试一下 注意在 中是不支持插值表达式的。请使用 v-model 来替代: template {{ text }} 复选框 单一的复选框,绑定布尔类型值: template {{ checked }}在演练场中尝试一下 在演练场中尝试一下 我们也可以将多个复选框绑定到同一个数组或集合的值: jsconst checkedNames = ref([])jsexport default { data() { return { checkedNames: [] } } }templateChecked names: {{ checkedNames }} Jack John MikeChecked names: []在这个例子中,checkedNames 数组将始终包含所有当前被选中的框的值。 在演练场中尝试一下 在演练场中尝试一下 单选按钮 templatePicked: {{ picked }} One TwoPicked:在演练场中尝试一下 在演练场中尝试一下 选择器 单个选择器的示例如下: templateSelected: {{ selected }} Please select one A B C Selected:在演练场中尝试一下 在演练场中尝试一下 注意 如果 v-model 表达式的初始值不匹配任何一个选择项, 元素会渲染成一个“未选择”的状态。在 iOS 上,这将导致用户无法选择第一项,因为 iOS 在这种情况下不会触发一个 change 事件。因此,我们建议提供一个空值的禁用选项,如上面的例子所示。 多选 (值绑定到一个数组): templateSelected: {{ selected }} A B C Selected: []在演练场中尝试一下 在演练场中尝试一下 选择器的选项可以使用 v-for 动态渲染: jsconst selected = ref('A') const options = ref([ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ])jsexport default { data() { return { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } } }template {{ option.text }} Selected: {{ selected }}在演练场中尝试一下 在演练场中尝试一下 值绑定 对于单选按钮,复选框和选择器选项,v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值): template ABC但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外,使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。 复选框 templatetrue-value 和 false-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值: template提示 true-value 和 false-value attributes 不会影响 value attribute,因为浏览器在表单提交时,并不会包含未选择的复选框。为了保证这两个值 (例如:“yes”和“no”) 的其中之一被表单提交,请使用单选按钮作为替代。 单选按钮 templatepick 会在第一个按钮选中时被设为 first,在第二个按钮选中时被设为 second。 选择器选项 template 123v-model 同样也支持非字符串类型的值绑定!在上面这个例子中,当某个选项被选中,selected 会被设为该对象字面量值 { number: 123 }。 修饰符 .lazy 默认情况下,v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据: template .number 如果你想让用户输入自动转换为数字,你可以在 v-model 后添加 .number 修饰符来管理输入: template如果该值无法被 parseFloat() 处理,那么将返回原始值。 number 修饰符会在输入框有 type="number" 时自动启用。 .trim 如果你想要默认自动去除用户输入内容中两端的空格,你可以在 v-model 后添加 .trim 修饰符: template组件上的 v-model 如果你还不熟悉 Vue 的组件,那么现在可以跳过这个部分。 HTML 的内置表单输入类型并不总能满足所有需求。幸运的是,我们可以使用 Vue 构建具有自定义行为的可复用输入组件,并且这些输入组件也支持 v-model!要了解更多关于此的内容,请在组件指引中阅读配合 v-model 使用。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |