本文實例為大家分享了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
