一区二三区AV片,999精彩视频

快捷導(dǎo)航

Vue.js 2.0中select級(jí)聯(lián)下拉框?qū)嵗?/h1>

更新時(shí)間：2017年03月06日 11:39:36 作者：w-rain

在網(wǎng)上搜索了Vuejs2.0 動(dòng)態(tài)級(jí)聯(lián)select許久未果，決定自己總結(jié)一下自己的經(jīng)驗(yàn)，有關(guān)select在Vue.js 2.0版本中的應(yīng)用，需要的朋友可以參考下

在網(wǎng)上搜索了Vuejs2.0 動(dòng)態(tài)級(jí)聯(lián)select許久未果，決定自己總結(jié)一下自己的經(jīng)驗(yàn)，有關(guān)select在Vue.js 2.0版本中的應(yīng)用。首先我先說(shuō)一下的我使用的技術(shù)，我參考了網(wǎng)上成熟的經(jīng)驗(yàn)，選擇以Vue.js 2.0+Vue-router+Vuex的全家桶。

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

select單選實(shí)例：

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

當(dāng)被選中的option有value屬性時(shí)，vm.selected 為對(duì)應(yīng)option的value值；否則為對(duì)應(yīng)options的text值。

select多選實(shí)例：

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

對(duì)于多選的select，被選中的值會(huì)被放入一個(gè)數(shù)組中。當(dāng)然在我們實(shí)際開發(fā)中絕大部分都是動(dòng)態(tài)select的情況，所以接下來(lái)將分析動(dòng)態(tài)select的實(shí)例。

動(dòng)態(tài)select

我們可以通過(guò)v-for、v-bind指令動(dòng)態(tài)生成option，實(shí)例如下：

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

生成的代碼結(jié)構(gòu)如下：

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

到這兒基礎(chǔ)知識(shí)總結(jié)完了，開始來(lái)干貨了。我在寫級(jí)聯(lián)select的時(shí)候遇到2個(gè)問(wèn)題，一個(gè)問(wèn)題是如何解決第一個(gè)select選中之后查詢關(guān)聯(lián)select的數(shù)據(jù)；一個(gè)問(wèn)題就是我修改數(shù)據(jù)的時(shí)候如何默認(rèn)選中級(jí)聯(lián)的select數(shù)據(jù)，顯示在頁(yè)面。這2個(gè)問(wèn)題主要還是第二個(gè)問(wèn)題困擾我一點(diǎn)。

第一個(gè)問(wèn)題的解決方案是對(duì)選中第一個(gè)select中的數(shù)據(jù)做監(jiān)聽，數(shù)據(jù)又變化就發(fā)起獲取第二個(gè)關(guān)聯(lián)select的請(qǐng)求。實(shí)例如下所示：

<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' //獲取城市對(duì)應(yīng)轄區(qū)的下拉列表
 },
 methods: {
 getSelectLists: function() {},
 getSecondSelectLists: function(){}
 }
 }
 
</script>

第二個(gè)問(wèn)題的解決方案是首先我在實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用，先獲取城市下拉列表成功之后再去獲取編輯詳情的數(shù)據(jù)，然后延時(shí)綁定關(guān)聯(lián)的轄區(qū)列表的值，其實(shí)是為了獲取在生命周期內(nèi)監(jiān)聽城市之改變之后為先獲取轄區(qū)列表數(shù)據(jù)加載，這樣才能綁定顯示轄區(qū)的下拉列表。

<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();  //實(shí)例已經(jīng)創(chuàng)建完成之后獲取城市下拉列表
 },
 watch: {
 resCity: 'getSecondSelectLists'  //監(jiān)聽城市值變化，獲取城市對(duì)應(yīng)轄區(qū)的下拉列表
 },
 methods: {
 getSelectLists: function() {
 let vm = this;
 if(vm.$route.name == 'modif') { //判斷編輯頁(yè)面獲取編輯詳情數(shù)據(jù)
  vm.getDetails(vm.$route.params.id); 
 }
 },
 getSecondSelectLists: function(){},
 getDetails:function(){
 setTimeout(function() {
  vm.resArea = data.id; //延時(shí)綁定轄區(qū)的下拉選項(xiàng)，為了轄區(qū)下拉數(shù)據(jù)先加載
  }, 300);
 }
 }
 }
</script>

總結(jié)：

在Vue.js 2.0的生命周期中，select的級(jí)聯(lián)下拉數(shù)據(jù)綁定，需要先加載好數(shù)據(jù)，然后才能綁定值。不然無(wú)法成功綁定級(jí)聯(lián)下拉的值。

參考資料：

vue.js官網(wǎng)

以上所述是小編給大家介紹的Vue.js 2.0中select級(jí)聯(lián)下拉框?qū)嵗?，希望?duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: