vue 實現二級聯動

lufficc 發布于2019-08-23 11:53 / 3451人閱讀

摘要：因項目需要，最近用寫了個二級聯動，剛開始用不熟悉，收集了兩種方法，這也是我借鑒別人的文章和思路才寫出來的，其實沒什么區別，可以參考下第一種這是第一種方法的部分代碼這是第一種方法的部分代碼計信院計信院軟件工程計算機科學與技術信息安全商學

因項目需要，最近用vue寫了個二級聯動，剛開始用vue不熟悉，收集了兩種方法，這也是我借鑒別人的文章和思路才寫出來的，其實沒什么區別，可以參考下：
第一種：
這是第一種方法的html部分代碼：

這是第一種方法的js部分代碼：

new Vue({
  el: "#test",
  data: {
    selected: "計信院",
    YX: [{
      text: "計信院",
      ZY: [{
        text: "軟件工程"
      }, {
        text: "計算機科學與技術"
      }, {
        text: "信息安全"
      }, ]
    }, {
      text: "商學院",
      ZY: [{
        text: "旅游管理"
      }, {
        text: "工商管理"
      }, {
        text: "行政管理"
      }, ]
    }, ]
  },
  computed: {
    selection: {
      get: function() {
        var that = this;
        return this.YX.filter(function(item) {
          return item.text == that.selected;
        })[0].ZY;
      }
    }
  }
});

以上是一種方法，總體來說還不錯，而且默認有第一項，無需在寫默認項。
下面是另一種方法，這個方法和上面不同的是沒有默認項，但是比上面哪種方法更好理解，這個方法怎么加默認項，現在還沒搞明白，后續會繼續更新：
這是第二種方法的html部分代碼：

這是第二種方法的js部分代碼：

var vm = new Vue({
    el:"#test",
    data:{
        YX:[
            {
                text:"計信院",
                ZY:[
                    {text:"軟件工程"},
                    {text:"計算機科學與技術"},
                    {text:"信息安全"},
                ]
            },
            { 
                text:"商學院",
                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;
                }
            }
        }
    }
});

總體來說，兩種方法都可以，都值得借鑒一下

GPU云服務器云服務器 VUE實現webrtc Vue實現分頁省市二級聯動數據二級聯動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97625.html

vue項目中使用element-ui下拉框選項值為對象時報錯

摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細，百度過幾篇文章，也沒有理解他們表達的意思，然后自己又去看文檔，把他的屬性看...

Drummor 2019-08-26 10:57 評論0 收藏0
thinkphp+jquery+ajax二級聯動使用心得

摘要：注意和，供選擇器使用所屬分類請選擇分類所屬課程要先引用后端代碼前期遍歷，第一個下拉菜單的值從數據庫取出子課程添加處理的方法子課程添加下拉菜單二級聯動感覺寫的很詳細啦，歡迎和我一起探討哦，么么噠一、想實現的效果：用thinkphp+jquery+ajax實現二級聯動，當所屬分類選擇媽咪英語時，下面所屬課程會自動列出媽咪英語下的子類。類似省市二級聯動 showImg(https:/...

Invoker 2019-06-27 16:31 評論0 收藏0
jq+php+mysql 實現二級菜單聯動

摘要：二級聯動下拉菜單選擇應用在在很多地方，比如說省市下拉聯動，商品大小類下拉選擇聯動。實現原理根據大類的值，通過把值傳給后臺處理，通過查詢數據庫，得到相應的小類，并返回數據給前端處理。二級聯動下拉菜單選擇應用在在很多地方，比如說省市下拉聯動，商品大小類下拉選擇聯動。實現的效果就是當選擇大類時，小類下拉框里的選項內容也隨著改變。實現原理：根據大類的值，通過jQuery把值傳給后臺PHP處...

sf_wangchong 2019-06-27 15:49 評論0 收藏0
php jquery ajax select 二級聯動

摘要：還是那是老話，好記性不如爛筆頭會的東西，不經常動手做，也就忘記了，下面是一個的聯動實用小例中函數中函數還是那是老話，好記性不如爛筆頭會的東西，不經常動手做，也就忘記了，下面是一個jquery ajax select 的聯動實用小例： ajaxTest.html jquery + ajax + php + select ...

Apollo 2019-06-27 10:38 評論0 收藏0
真香警告：即使不用餓了么訂餐，也請務必收藏好該庫！

摘要：架構在編寫第三方庫的最佳實踐使用者無需了解內部邏輯，通過實現接口即可輕松完成個性化配置。絕不使用，絕不使用奇技淫巧編寫艱深晦澀的代碼。由來 LinkageRecyclerView 是一款基于 MVP 架構開發的二級聯動列表控件。它是因 RxJava 魔法師這個項目的需求而存在。在最初尋遍了 GitHub 也沒有找到合適的開源庫（高度解耦、可遠程依賴）之后，我決心研究參考現有開源項目關于...

hightopo 2019-05-23 17:30 評論0 收藏0