select 默认选中空白解决方案
2018-11-23 本文已影响0人
yong_zai
一. 普通写法
<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中的数据还未完成初始化
