<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 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
来源:https://www.cnblogs.com/smile6542/p/12231064.html