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


Posted in Javascript onJanuary 10, 2017

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

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

Javascript 相关文章推荐
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
谈一谈收音机的高放电路
2021/03/02 无线电
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
详解Python中第三方库Faker
2020/09/25 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
与UNIX有关的几个名词
2015/09/17 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
文明市民先进事迹
2014/05/15 职场文书
结婚老公保证书
2015/02/26 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2016春季运动会开幕词
2016/03/04 职场文书