使用vue.js实现联动效果的示例代码
更新时间：2017年01月10日 14:35:23 作者：gobraves
本篇文章主要介绍了使用vue.js实现联动效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
想用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
数据可视化是现代Web应用程序中的一个重要组成部分，词云是一种非常流行的数据可视化形式，可以用来展示文本数据中的主题和关键字，本文我们将介绍如何在Vue中使用词云库进行数据可视化词云展示和词云生成，需要的可以参考一下2023-06-06
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。接下来就看看vue如何使用它2021-05-05
这篇文章主要为大家介绍了图解Vue的响应式原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了nuxt+axios解决前后端分离SSR的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
Vue3动态组件怎么进行异常处理？下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
详解vuex中action何时完成以及如何正确调用dispatch的思考
这篇文章主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
EventBus是一种发布/订阅事件设计模式的实践。这篇文章主要介绍了vue采用EventBus实现跨组件通信及注意事项,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了解决vue3打包过后空白页面的情况，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论