vue.js实现联动效果

<script src="//cdn.bootcss.com/vue/2.2.4/vue.min.js"></script><div id="test"><select v-model="selected"><option v-for="yx in YX" :value="yx.text">{{yx.text}}</option></select><select><option v-for="(zy, index) in selection" :value="zy.text" :selected="index == 0 ? true : false">{{zy.text}}</option></select>
</div>
<script>new Vue({el: '#test',data: {selected: '计信院',YX: [{text: '计信院',ZY: [{text: '软件工程'}, {text: '计算机科学与技术'}, {text: "信息安全"}, ]}, {text: '商学院',ZY: [{text: '旅游管理'}, {text: '工商管理'}, {text: "行政管理"}, ]}, ]},computed: {selection: {get: function() {var that = this;return this.YX.filter(function(item) {return item.text == that.selected;})[0].ZY;}}}});
</script>

posted on 2017-02-08 08:06 木子炜培先生阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/liadmin/p/6376548.html

vue.js实现联动效果相关推荐

php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
Vue.js 框架从入门到精通，只需要它！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
从零吃透 Vue.js 框架，这里全部有！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
Vue.js Element入门
作者 QQ群:852283276 微信:arm80x86 微信公众号:青儿创客基地 B站:主页 https://space.bilibili.com/208826118 参考 Element中文官网 ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
vue实现下拉二级联动_vue实现二级联动效果
你如城市与省份间的二级联动效果 demo .pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;} 所在区域 {{i ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...

vue.js实现联动效果

vue.js实现联动效果相关推荐

最新文章

热门文章