Vue.js 2.0中select级联下拉框实例

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

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

<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>

<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>

<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() {
 let vm = this;
 if(vm.$route.name == 'modif') { //判断编辑页面获取编辑详情数据
  vm.getDetails(vm.$route.params.id); 
 }
 },
 getSecondSelectLists: function(){},
 getDetails:function(){
 setTimeout(function() {
  vm.resArea = data.id; //延时绑定辖区的下拉选项，为了辖区下拉数据先加载
  }, 300);
 }
 }
 }
</script>