vue中v-model对select的绑定操作
更新时间：2020年08月31日 09:15:51 作者：Cherries_h
这篇文章主要介绍了vue中v-model对select的绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、单选时
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
data: {
selected: ''
}
如果 v-model表达式的value初始值未能匹配任何选项，<select>
元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
2、多选时（绑定到一个数组）
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
data: {
selected: []
}
3、用 v-for渲染的动态选项：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)，有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时 typeof vm.selected // => 'object' vm.selected.number // => 123
具体参考 https://cn.vuejs.org/v2/guide/forms.html#选择框
补充知识：v-model绑定后设置selected问题
v-model绑定数据后设置selected无效原因
v-model绑定的数据需要与selected的option值相同才生效
以上这篇vue中v-model对select的绑定操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue制作点击切换图片效果的详细思路与步骤,图片切换是一个很经典的Vue入门学习案例,在你学习完一些基本的v-指令后,你可以尝试去写一个简单的demo去巩固和熟悉这些指令的使用方法,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了vue开发之LogicFlow自定义业务节点,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
这篇文章主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下2019-03-03
vant组件表单外部的button触发form表单的submit事件问题
这篇文章主要介绍了vant组件表单外部的button触发form表单的submit事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
我们正常在开发项目中,表格的风格是一致的,但是表格或多或少会有些不同,有些是需要分页,有些是按钮功能不同,有些又需要加Tag,或者对时间进行格式化等,这篇文章主要介绍了elementPlus表格二次封装过程,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vuex的module模块用法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了一键将Word文档转成Vue组件mammoth的应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue插值表达式和v-text指令的区别，{{}}这种语法叫做插值表达式，在插值表达式中可以写任何合法的js表达式，下面来看看文章是怎么介绍该内容的吧,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了Vue ECharts实现机舱座位选择展示,本文给大家分享一段简短的代码通过效果图展示给大家介绍的非常明白，需要的朋友可以参考下2022-05-05
Vue Router 提供了强大的路由管理能力,帮助开发者轻松构建流畅、高效的单页应用,本文将带你深入探讨 Vue3 中的路由配置与导航操作,从安装到实战,手把手教你掌握 Vue Router 的使用技巧,需要的朋友可以参考下2025-03-03
最新评论