Vue 表单输入绑定
封面图
•
2025-11-16
•
Vue
0
0
0
0
在 Vue 中,**表单输入绑定**是用于将用户在表单中的输入(如文本框、复选框、单选按钮、下拉菜单等)与 Vue 实例的数据进行双向绑定的机制。Vue 提供了 `v-model` 指令来实现这一功能。 --- ## 一、基本用法:`v-model` `v-model` 是 Vue 中用于表单输入绑定的指令,它会根据不同的输入类型自动选择合适的处理方式。 ### 1. 文本输入框(`<input type="text">`) ```html <template> <div> <input v-model="message" placeholder="请输入"> <p>你输入的内容是:{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } } } </script> ``` ### 2. 多行文本框(`<textarea>`) ```html <template> <div> <textarea v-model="message"></textarea> <p>你输入的内容是:{{ message }}</p> </div> </template> ``` ### 3. 单选按钮(`<input type="radio">`) ```html <template> <div> <label><input type="radio" value="A" v-model="selected"> A</label> <label><input type="radio" value="B" v-model="selected"> B</label> <p>你选择了:{{ selected }}</p> </div> </template> <script> export default { data() { return { selected: '' } } } </script> ``` ### 4. 复选框(`<input type="checkbox">`) #### 单个复选框 ```html <template> <div> <input type="checkbox" v-model="checked"> <label>是否勾选:{{ checked }}</label> </div> </template> ``` #### 多个复选框(绑定数组) ```html <template> <div> <input type="checkbox" value="A" v-model="selectedOptions"> <input type="checkbox" value="B" v-model="selectedOptions"> <input type="checkbox" value="C" v-model="selectedOptions"> <p>你选择了:{{ selectedOptions }}</p> </div> </template> <script> export default { data() { return { selectedOptions: [] } } } </script> ``` ### 5. 下拉选择框(`<select>`) ```html <template> <div> <select v-model="selectedOption"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <p>你选择了:{{ selectedOption }}</p> </div> </template> <script> export default { data() { return { selectedOption: '' } } } </script> ``` --- ## 二、修饰符(Modifiers) `v-model` 支持一些修饰符,用于更精细地控制输入行为: | 修饰符 | 说明 | |--------------|-------------------------------| | `.lazy` | 在 `change` 事件而非 `input` 事件同步数据 | | `.number` | 自动将输入值转换为数字 | | `.trim` | 自动过滤输入的首尾空格 | ### 示例: ```html <input v-model.lazy="msg"> <!-- 在 change 时更新 --> <input v-model.number="age"> <!-- 自动转成数字 --> <input v-model.trim="username"> <!-- 自动去除首尾空格 --> ``` --- ## 三、自定义组件使用 `v-model` 你可以通过 `modelValue` 和 `update:modelValue` 来在自定义组件中支持 `v-model`。 ```html <!-- CustomInput.vue --> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> ``` 使用: ```html <custom-input v-model="message" /> ``` --- ## 四、总结 | 输入类型 | 使用 `v-model` | 数据绑定方式 | |----------------|----------------|----------------------| | 文本框 | ✅ | `data.message` | | 多行文本框 | ✅ | `data.message` | | 单选按钮 | ✅ | `data.selected` | | 复选框 | ✅ | `data.checked` 或 `data.options` | | 下拉选择框 | ✅ | `data.selectedOption` | --- 如果你有具体的场景或问题(比如表单验证、动态表单等),可以告诉我,我可以提供更详细的解决方案 😊
上一篇:
Vue 事件处理
下一篇:
Vue 模板引用
标题录入,一次不能超过6条
留言
评论