VUE 多级联动select菜单（易懂）
赵立果
直接上代码
<body>
<div id="checkbox">
<select v-model="selected" @change='func()'>
<option value='' disabled selected style='display:none;'>选择1</option>
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<select name="" id="">
<option value='' disabled selected style='display:none;'>选择2</option>
<option v-for="option in options2" v-bind:value="option.text">
{{ option.text }}
</option>
</select>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#checkbox',
data: {
selected: '',
options: [//一级菜单
{ text: 'A', value: 'A' },
{ text: 'B', value: 'B' },
{ text: 'C', value: 'C' }
],
options2:[],//二级菜单
},
methods:{
func:function(){//绑定事件，给二级菜单赋值
switch(this.selected){
case 'A':this.options2=[{text:'A-1'},{text:'A-2'},{text:'A-3'}];break;
case 'B':this.options2=[{text:'B-1'},{text:'B-2'},{text:'B-3'}];break;
case 'C':this.options2=[{text:'C-1'},{text:'C-2'},{text:'C-3'}];break;
}
}
}
})
</script>
</body>
类似资料：