vue实现二级联动选择器

爱吃甜品的游u

已于 2023-09-09 17:24:10 修改

阅读量785

点赞数

文章标签： vue.js javascript 前端

于 2021-11-04 16:02:43 首次发布

本文链接：https://blog.csdn.net/weixin_47736903/article/details/121144660

版权

<!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">
        <option v-for="department in departments"> 
         {{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>