使用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 输入框数字限制插件
Nov 10 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
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开发过程中常用函数收藏
2009/12/14 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PDO::quote讲解
2019/01/29 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python脚本监控docker容器
2016/04/27 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python分支结构(switch)操作简介
2018/01/17 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python基础之文件读取的讲解
2019/02/16 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python实现文法左递归的消除方法
2020/05/22 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
分公司经理任命书
2014/06/05 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书