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

Original 2017-01-14 11:00:09 327
abstract:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有成功。请大家指点下我的思路是:通过遍历YX数组,如果某个对象的text和第一个SELECT的SELECTed value相同,则显示对应院系的专业<div id="test&quo

本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

想用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>

  更多关于使用vue.js实现联动效果的示例代码请关注PHP中文网(m.sbmmt.com)其他文章!

Release Notes

Popular Entries