本文介绍了在Vue项目中实现下拉二级联动的两种方法。第一种方法提供了默认选项，通过`computed`属性处理数据；第二种方法则不包含默认选项，但更易于理解。虽然第二种方法如何添加默认项尚未明确，这两种方式都为Vue的二级联动提供了参考。
因项目需要，最近用vue写了个二级联动，刚开始用vue不熟悉，收集了两种方法，这也是我借鉴别人的文章和思路才写出来的，其实没什么区别，可以参考下：
第一种：
这是第一种方法的html部分代码：
{{yx.text}}
{{zy.text}}
这是第一种方法的js部分代码：
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;
}
}
}
});
以上是一种方法，总体来说还不错，而且默认有第一项，无需在写默认项。
下面是另一种方法，这个方法和上面不同的是没有默认项，但是比上面哪种方法更好理解，这个方法怎么加默认项，现在还没搞明白，后续会继续更新：
这是第二种方法的html部分代码：
{{yx.text}}
{{zy.text}}
这是第二种方法的js部分代码：
var vm = new Vue({
el:'#test',
data:{
YX:[
{
text:'计信院',
ZY:[
{text:'软件工程'},
{text:'计算机科学与技术'},
{text:"信息安全"},
]
},
{
text:'商学院',
ZY:[
{text:'旅游管理'},
{text:'工商管理'},
{text:"行政管理"},
]
},
]
},
computed:{
selection: function() {
for (var i = 0; i < this.YX.length; i++) {
if (this.YX[i].text === this.A) {
return this.YX[i].ZY;
}
}
}
}
});
总体来说，两种方法都可以，都值得借鉴一下
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
