vue实现二级联动选择器

vue 专栏收录该内容
1 篇文章 0 订阅

使用vue实现二级联动的下拉列表选择器,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="test">
    <span>选择知识路径:</span>
    <select v-model="selectedDepartment">
         {{department.name}} 
     </option>  //一级选择器
    </select>

    <select>
      <option v-for="major in majors"> 
          {{major}}   //二级选择器
      </option>
    </select>
  </div>

<script type="text/javascript">
    new Vue({
        el: '#test',
        data: function() {
        return {
          departments: [
            {name: '高中', majors: ['数学', '英语', '语文','化学']},
            {name: '初中', majors: ['数学', '英语', '语文']},
            {name: '小学', majors: ['数学', '语文']}
          ],
          selectedDepartment: '高中'
        };
        },
        computed: {
        majors: function() {
          var majors = [], selectedDepart = this.$data.selectedDepartment;
          this.$data.departments.forEach(function(d) {
            if(d.name == selectedDepart)
              majors = d.majors;
          });
          return majors;
        }
        }
    })
</script>
</body>
</html>
  • 2
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值