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框顯示空白。需要在在初始化屬性時對該屬性賦予確定的值