資訊專(zhuān)欄INFORMATION COLUMN
摘要：因項(xiàng)目需要，最近用寫(xiě)了個(gè)二級(jí)聯(lián)動(dòng)，剛開(kāi)始用不熟悉，收集了兩種方法，這也是我借鑒別人的文章和思路才寫(xiě)出來(lái)的，其實(shí)沒(méi)什么區(qū)別，可以參考下第一種這是第一種方法的部分代碼這是第一種方法的部分代碼計(jì)信院計(jì)信院軟件工程計(jì)算機(jī)科學(xué)與技術(shù)信息安全商學(xué)
因項(xiàng)目需要，最近用vue寫(xiě)了個(gè)二級(jí)聯(lián)動(dòng)，剛開(kāi)始用vue不熟悉，收集了兩種方法，這也是我借鑒別人的文章和思路才寫(xiě)出來(lái)的，其實(shí)沒(méi)什么區(qū)別，可以參考下：
第一種：
這是第一種方法的html部分代碼：
這是第一種方法的js部分代碼：
new Vue({
el: "#test",
data: {
selected: "計(jì)信院",
YX: [{
text: "計(jì)信院",
ZY: [{
text: "軟件工程"
}, {
text: "計(jì)算機(jī)科學(xué)與技術(shù)"
}, {
text: "信息安全"
}, ]
}, {
text: "商學(xué)院",
ZY: [{
text: "旅游管理"
}, {
text: "工商管理"
}, {
text: "行政管理"
}, ]
}, ]
},
computed: {
selection: {
get: function() {
var that = this;
return this.YX.filter(function(item) {
return item.text == that.selected;
})[0].ZY;
}
}
}
});
以上是一種方法，總體來(lái)說(shuō)還不錯(cuò)，而且默認(rèn)有第一項(xiàng)，無(wú)需在寫(xiě)默認(rèn)項(xiàng)。
下面是另一種方法，這個(gè)方法和上面不同的是沒(méi)有默認(rèn)項(xiàng)，但是比上面哪種方法更好理解，這個(gè)方法怎么加默認(rèn)項(xiàng)，現(xiàn)在還沒(méi)搞明白，后續(xù)會(huì)繼續(xù)更新：
這是第二種方法的html部分代碼：
這是第二種方法的js部分代碼：
var vm = new Vue({
el:"#test",
data:{
YX:[
{
text:"計(jì)信院",
ZY:[
{text:"軟件工程"},
{text:"計(jì)算機(jī)科學(xué)與技術(shù)"},
{text:"信息安全"},
]
},
{
text:"商學(xué)院",
ZY:[
{text:"旅游管理"},
{text:"工商管理"},
{text:"行政管理"},
]
},
]
},
computed:{
selection: function() {
for (var i = 0; i < this.YX.length; i++) {
if (this.YX[i].text === this.A) {
return this.YX[i].ZY;
}
}
}
}
});
總體來(lái)說(shuō)，兩種方法都可以，都值得借鑒一下
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97625.html
摘要：在做后臺(tái)管理時(shí)，使用了搭配，請(qǐng)求方法使用了插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。 在做后臺(tái)管理時(shí)，使用了vue搭配elementUI，請(qǐng)求方法使用了axios插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。對(duì)select下拉框的文檔沒(méi)有讀的很仔細(xì)，百度過(guò)幾篇文章，也沒(méi)有理解他們表達(dá)的意思，然后自己又去看文檔，把他的屬性看...
摘要：注意和，供選擇器使用所屬分類(lèi)請(qǐng)選擇分類(lèi)所屬課程要先引用后端代碼前期遍歷，第一個(gè)下拉菜單的值從數(shù)據(jù)庫(kù)取出子課程添加處理的方法子課程添加下拉菜單二級(jí)聯(lián)動(dòng)感覺(jué)寫(xiě)的很詳細(xì)啦，歡迎和我一起探討哦，么么噠 一、想實(shí)現(xiàn)的效果： 用thinkphp+jquery+ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)，當(dāng)所屬分類(lèi)選擇媽咪英語(yǔ)時(shí)，下面所屬課程會(huì)自動(dòng)列出媽咪英語(yǔ)下的子類(lèi)。類(lèi)似省市二級(jí)聯(lián)動(dòng) showImg(https:/...
摘要：二級(jí)聯(lián)動(dòng)下拉菜單選擇應(yīng)用在在很多地方，比如說(shuō)省市下拉聯(lián)動(dòng)，商品大小類(lèi)下拉選擇聯(lián)動(dòng)。實(shí)現(xiàn)原理根據(jù)大類(lèi)的值，通過(guò)把值傳給后臺(tái)處理，通過(guò)查詢(xún)數(shù)據(jù)庫(kù)，得到相應(yīng)的小類(lèi)，并返回?cái)?shù)據(jù)給前端處理。 二級(jí)聯(lián)動(dòng)下拉菜單選擇應(yīng)用在在很多地方，比如說(shuō)省市下拉聯(lián)動(dòng)，商品大小類(lèi)下拉選擇聯(lián)動(dòng)。 實(shí)現(xiàn)的效果就是當(dāng)選擇大類(lèi)時(shí)，小類(lèi)下拉框里的選項(xiàng)內(nèi)容也隨著改變。實(shí)現(xiàn)原理：根據(jù)大類(lèi)的值，通過(guò)jQuery把值傳給后臺(tái)PHP處...
摘要：還是那是老話，好記性不如爛筆頭會(huì)的東西，不經(jīng)常動(dòng)手做，也就忘記了，下面是一個(gè)的聯(lián)動(dòng)實(shí)用小例中函數(shù)中函數(shù) 還是那是老話，好記性不如爛筆頭 會(huì)的東西，不經(jīng)常動(dòng)手做，也就忘記了，下面是一個(gè)jquery ajax select 的聯(lián)動(dòng) 實(shí)用小例： ajaxTest.html jquery + ajax + php + select ...
摘要：架構(gòu)在編寫(xiě)第三方庫(kù)的最佳實(shí)踐使用者無(wú)需了解內(nèi)部邏輯，通過(guò)實(shí)現(xiàn)接口即可輕松完成個(gè)性化配置。絕不使用，絕不使用奇技淫巧編寫(xiě)艱深晦澀的代碼。 由來(lái) LinkageRecyclerView 是一款基于 MVP 架構(gòu)開(kāi)發(fā)的二級(jí)聯(lián)動(dòng)列表控件。它是因 RxJava 魔法師 這個(gè)項(xiàng)目的需求而存在。 在最初尋遍了 GitHub 也沒(méi)有找到合適的開(kāi)源庫(kù)（高度解耦、可遠(yuǎn)程依賴(lài)）之后，我決心研究參考現(xiàn)有開(kāi)源項(xiàng)目關(guān)于...
閱讀 3138·2021-11-24 11:14
閱讀 3661·2021-11-22 15:22
閱讀 3280·2021-09-27 13:36
閱讀 798·2021-08-31 14:29
閱讀 1385·2019-08-30 15:55
閱讀 1856·2019-08-29 17:29
閱讀 1195·2019-08-29 16:24
閱讀 2529·2019-08-26 13:48
