最近開(kāi)始學(xué)習(xí)vue，在學(xué)習(xí)的過(guò)程中遇到的問(wèn)題將記錄在這里。
今天遇到的第一個(gè)問(wèn)題就是，select下拉列表設(shè)置默認(rèn)選中的問(wèn)題。
官方文檔傳送門(mén)

第1中方法，已知下拉列表的內(nèi)容

<div id="app">
    <select v-model="selectedOption">
        <option v-for="option in options" :value="option">{{option.city}}</option>
    </select>
</div>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        selectedOption:{cityCode:0,city:"北京"},
        options:[
            {
                cityCode:0,
                city:"北京"
            },{
                cityCode:1,
                city:"上海"
            },{
                cityCode:2,
                city:"天津"
            },{
                cityCode:3,
                city:"重慶"
            }
        ]
    }
})

第2中方法，數(shù)據(jù)是由后臺(tái)返回回來(lái)，不能確定默認(rèn)項(xiàng)的具體數(shù)值

<div id="app">
    <select v-model="selectedOption">
        <option v-for="option in options" :value="option">{{option.city}}</option>
    </select>
</div>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        selectedOption:{},
        options:[]
    },
    created(){
        this.$http.get('/api/cities').then((res)=>{
            this.options = res.data;
            this.selectedOption = this.options[0];
        })
    }
})

我一般選擇使用第2中方法，這樣如果后臺(tái)數(shù)據(jù)有修改，我這里的代碼也不需要修改。而且此處的selectedOption是一個(gè)對(duì)象，是為了方便在后續(xù)中可能會(huì)需要使用其他數(shù)據(jù)。