本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码，供大家参考，具体内容如下
方法一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script type="text/ecmascript-6">
export default {
data() {
return {
isShowSelect: false,
dataList: [
{key: -1, value: "请选择"},
{key: 0, value: "苹果"},
{key: 1, value: "香蕉"}
]
unitName:'请选择'
}
},
methods: {
arrowDown() {
this.isShowSelect = !this.isShowSelect;
},
select(item, index) {
this.isShowSelect = false;
console.log(item);
console.log(index);
this.unitModel = index;
this.unitName = item.value;
}
}
};
</script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<li>
<h3 class="F7">下拉框选择案例</h3>
<div class="por">
<div class="selectBox" style="width: 400px;">
<div class="selectBox_show" v-on:click.stop="arrowDown">
<i class="icon icon_arrowDown"></i>
<p title="请选择">{{unitName}}</p>
<input type="hidden" name="unit" v-model="unitModel">
</div>
<div class="selectBox_list" v-show="isShowSelect"
style="max-height: 240px; width: 398px; display: block;">
<div class="selectBox_listLi" v-for="(item, index) in dataList"
@click.stop="select(item, index)">{{item.value}}
</div>
</div>
</div>
</div>
</li>
|
方法二：由父组件传递数据给子组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<template>
<div class="selection-component">
<div class="selection-show" @click="toggleDrop">
<span>{{ selections[nowIndex].label }}</span>
<div class="arrow"></div>
</div>
<div class="selection-list" v-if="isDrop">
<ul>
<li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
</ul>
</div>
</div>
</template>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<script>
export default {
props: {
selections: {
type: Array,
default: [{
label: 'test',
value: 0
}]
}
},
data () {
return {
isDrop: false,
nowIndex: 0
}
},
methods: {
toggleDrop () {
this.isDrop = !this.isDrop
},
chooseSelection (index) {
this.nowIndex = index
this.isDrop = false
this.$emit('on-change', this.selections[this.nowIndex])
}
}
}
</script>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/liuxin_1991/article/details/81181957