快捷導(dǎo)航

使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼

更新時(shí)間：2017年01月10日 14:35:23 作者：gobraves

本篇文章主要介紹了使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

想用vue.js寫(xiě)一個(gè)聯(lián)動(dòng)效果，按照自己的思路實(shí)驗(yàn)了下，并沒(méi)有成功。請(qǐng)大家指點(diǎn)下我的思路是：通過(guò)遍歷YX數(shù)組，如果某個(gè)對(duì)象的text和第一個(gè)select的selected value相同，則顯示對(duì)應(yīng)院系的專(zhuān)業(yè)

<div id="test">
  <select v-model="A">
  <option v-for="yx in YX">
    {{yx.text}}
  </option>
</select>


<select name="ZY">
  <option v-for="zy in {{ selection }}">
    {{zy.text}}
  </option>
</select>
</div>

<script>
new Vue({
  el:'#test',
  data:{
    YX:[
      {
        text:'計(jì)信院',
        ZY:[
          {text:'軟件工程'},
          {text:'計(jì)算機(jī)科學(xué)與技術(shù)'},
          {text:"信息安全"},
        ]
      },
      { 
        text:'商學(xué)院',
        ZY:[
          {text:'旅游管理'},
          {text:'工商管理'},
          {text:"行政管理"},
        ]
      },    
    ]
  },
  computed:{
    selection: {
      get: function() {
        var obj;
        var ZY = eval(this.YX)
        for(obj in ZY)
        {
          if(A == obj.text)
            B = obj.ZY
        }
        return B
      }
    }
  }
});
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性
2022-08-08
vue頂部菜單欄實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了vue頂部菜單欄實(shí)現(xiàn)小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
vue+springboot用戶注銷(xiāo)功能實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+springboot用戶注銷(xiāo)功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-05-05
一起來(lái)學(xué)習(xí)Vue的生命周期
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式
這篇文章主要介紹了vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue2.0 組件傳值通訊的示例代碼
本篇文章主要介紹了Vue2.0 組件傳值通訊的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載
學(xué)了vue寫(xiě)項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫(xiě)法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載，感興趣的可以了解一下
2021-06-06
vue3項(xiàng)目打包成apk(android)詳細(xì)圖文教程
Vue本身是一個(gè)構(gòu)建用戶界面的漸進(jìn)式框架,不能直接打包成APK文件,但是你可以使用工具將Vue應(yīng)用打包成一個(gè)可以在Android設(shè)備上安裝的APK文件,這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包成apk(android)的相關(guān)資料,需要的朋友可以參考下
2024-05-05
vue3如何加載本地圖片等靜態(tài)資源淺析
在最近新起的項(xiàng)目中,用到了較新的技術(shù)棧vue3.2+vite+ts,跟著網(wǎng)上的寫(xiě)法漸漸上手了,下面這篇文章主要給大家介紹了關(guān)于vue3如何加載本地圖片等靜態(tài)資源的相關(guān)資料,需要的朋友可以參考下
2023-04-04
基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03