使用vue.js实现联动效果的示例代码

时间:2017-01-10    点击:100   

想用vue.js写一个联动效果,按照自己的思路实验了下,并没有成功。请大家指点下我的思路是:通过遍历YX数组,如果某个对象的text和第一个select的selected value相同,则显示对应院系的专业

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


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

<script>
new Vue({
  el:'#test',
  data:{
    YX:[
      {
        text:'计信院',
        ZY:[
          {text:'软件工程'},
          {text:'计算机科学与技术'},
          {text:"信息安全"},
        ]
      },
      { 
        text:'商学院',
        ZY:[
          {text:'旅游管理'},
          {text:'工商管理'},
          {text:"行政管理"},
        ]
      },    
    ]
  },
  computed:{
    selection: {
      get: function() {
        var obj;
        var ZY = eval(this.YX)
        for(obj in ZY)
        {
          if(A == obj.text)
            B = obj.ZY
        }
        return B
      }
    }
  }
});
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

简单实现IONIC购物车功能
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
bootstrap table分页模板和获取表中的ID方法
React实现点击删除列表中对应项
实现一个简单的vue无限加载指令方法
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved