vue中select默认选中
<div id="app"> <!-- 选择一个 --> <select name="abc" id="" v-model="fruits"> <option value="" >请选择</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="梨子">梨子</option> <option value="葡萄">葡萄</option> </select> <h2>你说选择的是:{{fruits}}</h2> <!-- 选择多个 --> <select name="abc" id="" v-model="fruitss" multiple> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="梨子">梨子</option> <option value="葡萄">葡萄</option> </select> <h2>你说选择的是:{{fruitss}}</h2> </div> </body> <script> const app = new Vue({ el: "#app", data() { return { fruits: "", fruitss: [] } }, }) </script>
点击contral来选中。
如果 v-model
表达式的初始值未能匹配任何选项,<select>
元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
座右铭: 读史使人明智,读诗使人聪慧, 数学使人精密,哲理使人深刻,伦理学使人有修养,逻辑修辞使人善辩。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步