使用vue.js实现联动效果的示例代码
2017-01-10 14:35
1381 查看
想用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用原生js实现页面蒙灰(mask)效果示例代码
- Vue使用vue-area-linkage实现地址三级联动效果的示例
- 使用mint-ui实现省市区三级联动效果的示例代码
- 使用原生js实现页面蒙灰(mask)效果示例代码
- vue2.0使用Sortable.js实现的拖拽功能示例
- 使用Bootstrap + Vue.js实现添加删除数据示例
- JS实现图片翻书效果示例代码
- JS实现不使用图片仿Windows右键菜单效果代码
- vue.js实现表格合并示例代码
- 使用JS实现图片展示瀑布流效果的实例代码
- 不使用jquery实现js打字效果示例分享
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)
- 使用jquery.upload.js实现异步上传示例代码
- JS使用cookie实现只出现一次的广告代码效果
- 使用dropkick.js插件实现省市区三级联动效果
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 基于JS实现省市联动效果代码分享
- ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码