使用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遍历Table应用示例
Apr 09 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
js实现复制粘贴的两种方法
Dec 04 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
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php实现异步数据调用的方法
2015/12/24 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
jQuery技巧总结
2011/01/01 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
python分析网页上所有超链接的方法
2015/05/08 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python对excel文档去重及求和的实例
2018/04/18 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
学习和使用python的13个理由
2019/07/30 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
儿园租房协议书范本
2014/12/02 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
民主生活会汇报材料
2014/12/15 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
三八节活动主持词
2015/07/04 职场文书
小学思品教学反思
2016/02/20 职场文书
python文件目录操作之os模块
2021/05/08 Python