vue实现select下拉默认值,option默认选中的问题
今天使用vue实现select下拉框时,发现用v-model绑定属性之后,原本默认显示第一条的select框变成了空白,在option标签中指定selected属性也没有效果,按照官网案例敲了一遍,还是没有默认显示第一条,网上查了后,才发现需要在生命周期钩子内设置参数。
1. 单选下拉框
vue组件部分
<template> <div id="v-model-select" class="demo"> <select name="" id="id1" v-model="selected"> <option disabled value=""> Please select one</option> <option> A</option> <option> B</option> <option> C</option> <option> D</option> </select> </div> </template>
js部分
export default { data(){ return { selected: '' } }, created(){ this.selected="" } }
2.多选下拉框
vue组件部分
<template> <div> <select v-model="selected" multiple> <option v-for="(o,i) in options" :key="i" :value="o.value">{{o.quotations}}</option> </select> <p>{{selected}}</p> </div> </template>
js部分
export default { data(){ return { selected:[], options:[ {value:'www.baidu.com',quotations:'百度'}, {value:'www.google.com.cn',quotations:'谷歌'}, {value:'www.github.com',quotations:'github'}, {value:'www.gitee.com',quotations:'gitee'}, {value:'www.juejin.cn',quotations:'掘金'} ] } }, created(){ this.selected.push(this.options[2].value) } }