vue 实现二级联动

因项目需要,最近用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;
                }
            }
        }
    }
});

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


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

前端工程师

30 声望
1 粉丝
0 条评论
推荐阅读
React 表单元素
代码解读:this.inp = this.inp.bind(this); 绑定inp函数this指向this.state 初始化变量inp() 监听input的输入值this.state.inputV 通过赋值获取input的value

Nick阅读 1k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

前端工程师

30 声望
1 粉丝
宣传栏