使用vue.js實現(xiàn)聯(lián)動效果的示例代碼
更新時間：2017年01月10日 14:35:23 作者：gobraves
本篇文章主要介紹了使用vue.js實現(xiàn)聯(lián)動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
想用vue.js寫一個聯(lián)動效果，按照自己的思路實驗了下，并沒有成功。請大家指點下我的思路是：通過遍歷YX數(shù)組，如果某個對象的text和第一個select的selected value相同，則顯示對應院系的專業(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:'計信院',
ZY:[
{text:'軟件工程'},
{text:'計算機科學與技術'},
{text:"信息安全"},
]
},
{
text:'商學院',
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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應用程序中的一個重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關鍵字，本文我們將介紹如何在Vue中使用詞云庫進行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的交互組件和簡單易用的節(jié)點定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應用。接下來就看看vue如何使用它2021-05-05
這篇文章主要為大家介紹了圖解Vue的響應式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了關于vue3前端獲取文件的絕對路徑問題解決的相關資料,文中通過代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue3動態(tài)組件怎么進行異常處理？下面本篇文章帶大家聊聊Vue3 動態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
這篇文章主要介紹了Vue中在新窗口打開頁面 及 Vue-router的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue采用EventBus實現(xiàn)跨組件通信及注意事項小結(jié)
EventBus是一種發(fā)布/訂閱事件設計模式的實踐。這篇文章主要介紹了vue采用EventBus實現(xiàn)跨組件通信及注意事項,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了解決vue3打包過后空白頁面的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09