Vue学习(四)--vue实现select下拉框默认值

今天使用vue实现select下拉框时，发现用v-model绑定属性之后，原本默认显示第一条的select框变成了空白，在option标签中指定selected属性也没有效果，于是总结了绑定不同属性类型下实现下拉框默认值的情况。这些方法在element-ui中的select选择器也适用。

1.单选下拉框设置默认值

在data中定义属性并赋予默认值，在select标签中使用v-model指令绑定该属性。

(1) 点击查看 vue 组件部分

<template>
  <div>
    <select name="" id="id1" v-model="education">
      <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" id="id2" v-model="searches" 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" id="id2" v-model="searches" 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框显示空白。需要在在初始化属性时对该属性赋予确定的值