vue实现二级联动选择器

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


<html>
<head>
<meta charset="utf-8">
<title>demotitle>
<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>

你可能感兴趣的:(vue,vue实现二级联动)