Vue学习,四--vue实现select下拉框默认值
今天使用vue实现select下拉框时,发现用v-model绑定属性之后,原本默认显示第一条的select框变成了空白,在option标签中指定selected属性也没有效果,于是总结了绑定不同属性类型下实现下拉框默认值的情况。这些方法在element-ui中的select选择器也适用。
1.单选下拉框设置默认值
在data中定义属性并赋予默认值,在select标签中使用v-model指令绑定该属性。
(1) 点击查看 vue 组件部分
<template>
<div>
<select name="" >
<option disabled value="selecteducation"> 请选择你的学历</option>
<option value="highschool" > 高中</option>
<option value="undergraduate"> 本科</option>
<option value="master"> 硕士</option>
<option value="doctor"> 博士</option>
</select>
</div>
</template>
(2) 点击查看 js 代码部分
<script>
export default {
data(){
return {
education:'',
}
},
created(){
this.education = 'undergraduate';
}
}
</script>
2.多选下拉框
多选下拉框要指定select标签的multiple属性。与单选类似,区别是多选时使用v-model指令绑定数组属性,所有选中的选项值会保存到数组中。因此在data中初始化该属性为数组类型
(1) 点击查看 vue 组件部分
<template>
<div>
<select name="s2" multiple>
<option :value="o.value" v-for="(o, i) in options" :key="i">{{o.name}}</option>
</select>
<h3>搜索引擎:{{searches}}</h3>
</div>
</template>
(2) 点击查看 js 代码部分
<script>
export default {
data(){
return {
searches:['搜狐.com'],
options:[
{value:'百度.com', name:'百度'},
{value:'谷歌.com', name:'谷歌'},
{value:'搜狐.com', name:'搜狐'},
{value:'必应.com', name:'必应'},
]
}
},
created(){
// this.searches = this.options[2].value
}
}
</script>
3. 获取计算属性的值
同样需要先在data中初始化默认值,然后把计算属性的结果值赋给该属性。这里使用多选下拉框的代码举例。
(1) 点击查看 vue 组件部分
<template>
<div>
<select name="s2" multiple>
<option :value="o.value" v-for="(o, i) in options" :key="i">{{o.name}}</option>
</select>
<h3>搜索引擎:{{searches}}</h3>
</div>
</template>
(2) 点击查看 js 代码部分
<script>
export default {
data(){
return {
searches:[],
options:[
{value:'百度.com', name:'百度'},
{value:'谷歌.com', name:'谷歌'},
{value:'搜狐.com', name:'搜狐'},
{value:'必应.com', name:'必应'},
]
}
},
computed:{
defaultSearches(){
let reslist = ['必应.com','搜狐.com'];
this.searches = reslist;
return reslist
}
},
created(){
this.defaultSearches(); // 实例创建后执行
}
}
</script>
4. 注意事项
(1) Html代码中,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值,如果不存在,则获取option的文本内容;
(2) v-model指令绑定的数据属性,必须先在data中对该属性进行初始化;
(3) 使用v-model绑定属性后,在option标签中使用selected属性无法实现默认值,此时select框显示空白。需要在在初始化属性时对该属性赋予确定的值