在網上搜索了Vuejs2.0 動態級聯select許久未果，決定自己總結一下自己的經驗，有關select在Vue.js 2.0版本中的應用。首先我先說一下的我使用的技術，我參考了網上成熟的經驗，選擇以Vue.js 2.0+Vue-router+Vuex的全家桶。

    select首先要區分單選和多選，v-model在select單選和多選上有區別。

    select單選實例：

<select v-model="fruit"> <option selected value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="watermelon">西瓜</option></select><span>Selected：{{ fruit }}</span>

    當被選中的option有value屬性時，vm.selected 為對應option的value值；否則為對應options的text值。

    select多選實例：

<select v-model="fruit" multiple> <option selected value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="watermelon">西瓜</option></select><span>Selected：{{ fruit | json }}</span>

對于多選的select，被選中的值會被放入一個數組中。當然在我們實際開發中絕大部分都是動態select的情況，所以接下來將分析動態select的實例。

動態select

我們可以通過v-for、v-bind指令動態生成option，實例如下：

<template> <div id="app"> <select v-model="fruit" > <option v-for="option in options" v-bind:value="option.value">  {{option.text}} </option> </select> <span>Selected：{{ fruit | json }}</span> </div></template> <script> new Vue({  el: '#app',  data: {   fruit: 'apple',   options: [    { text: '蘋果', value: 'apple' },    { text: '香蕉', value: 'banana' },    { text: '西瓜', value: 'watermelon' }   ]  } });</script>

   生成的代碼結構如下：

<select> <option value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="watermelon">西瓜</option></select>

到這兒基礎知識總結完了，開始來干貨了。我在寫級聯select的時候遇到2個問題，一個問題是如何解決第一個select選中之后查詢關聯select的數據；一個問題就是我修改數據的時候如何默認選中級聯的select數據，顯示在頁面。這2個問題主要還是第二個問題困擾我一點。

第一個問題的解決方案是對選中第一個select中的數據做監聽，數據又變化就發起獲取第二個關聯select的請求。實例如下所示：

<template> <div class="box-select-first"> <select v-model.lazy="resCity"> <option v-for="sc in scLists" v-bind:value="sc.areacode">{{sc.cityname}}</option> </select> </div> <div class="box-select-second"> <select v-model="resArea"> <option v-for="sa in saLists" v-bind:value="sa.id">{{sa.areaname}}</option> </select> </div> </template><script> export default { data: function () { return { resCity: null, resArea: null } }, created: function() { let vm = this; vm.getSelectLists(); //獲取城市下拉列表 }, watch: { resCity: 'getSecondSelectLists' //獲取城市對應轄區的下拉列表 }, methods: { getSelectLists: function() {}, getSecondSelectLists: function(){} } } </script>