select 預設選中空白解決方案
摘要：
一. 普通寫法
<select class=persons-select autocomplete=off>
<option>政治</option>
<option>經濟</option>
<opti...
一. 普通寫法
<select class=persons-select autocomplete=off> <option>政治</option> <option>經濟</option> <option selected>文化</option> </select>
- 備註:直接在option中新增selected屬性
二.vue中的寫法(預設選擇空白解決方案)
<body>
<div id="app">
<select autocomplete="off" v-model="contactPersonSelected">
<option v-for="option in contactPersonOptions" v-bind:value="option.id">{{option.name}}</option>
</select>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
contactPersonSelected: "",
contactPersonOptions: [
{ id: 0, name: "張三丰" },
{ id: 1, name: "周伯通" },
{ id: 2, name: "歐陽鋒" },
{ id: 3, name: "獨孤求敗" },
],
},
created() {
this.contactPersonSelected = this.contactPersonOptions[3].id
}
})
</script>
</body>
- 1.在select標籤中使用v-model指令
- 2.在created方法中對雙向繫結值進行初始化
- 注意不能再data中初始化繫結資料，因為此時data中的資料還未完成初始化