开发者社区> 问答> 正文

使用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>

展开
收起
杨冬芳 2016-06-06 13:08:12 3368 0
1 条回答
写回答
取消 提交回答
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载