码迷,mamicode.com
首页 > 其他好文 > 详细

vue中select默认选中

时间:2020-01-23 19:52:49      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:col   ons   change   rip   sele   选择   多个   点击   无法   

  <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 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

vue中select默认选中

标签:col   ons   change   rip   sele   选择   多个   点击   无法   

原文地址:https://www.cnblogs.com/smile6542/p/12231064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!