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 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。