vue 实现二级联动

Nick

因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下:
第一种:
这是第一种方法的html部分代码:

<div id="test">
  <select v-model="selected">
    <option v-for="yx in YX" :value="yx.text">
        {{yx.text}}
    </option>
  </select>
  <select>
    <option v-for="zy in selection" :value="zy.text" :selected="$index == 0 ? true : false">
        {{zy.text}}
    </option>
  </select>
</div>

这是第一种方法的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部分代码:

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

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

这是第二种方法的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;
                }
            }
        }
    }
});

总体来说,两种方法都可以,都值得借鉴一下

阅读 10.8k

经验收集
本专栏是本人原创文章私有的专栏,还请大家关注我的文章

前端工程师

30 声望
1 粉丝
0 条评论
你知道吗?

前端工程师

30 声望
1 粉丝
文章目录
宣传栏