因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下:
第一种:
这是第一种方法的html部分代码:
<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 in selection" :value="zy.text" :selected="$index == 0 ? true : false">
{{zy.text}}
</option>
</select>
</div>
这是第一种方法的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部分代码:
<div id="test">
<select v-model="A">
<option v-for="yx in YX">
{{yx.text}}
</option>
</select>
<select>
<option v-for="zy in selection">
{{zy.text}}
</option>
</select>
</div>
这是第二种方法的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;
}
}
}
}
});
总体来说,两种方法都可以,都值得借鉴一下
所有评论(0)