vuejs实现下拉框菜单选择

本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码,供大家参考,具体内容如下

方法一:

<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>

<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>

方法二:由父组件传递数据给子组件

<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>

<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>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vuejs实现下拉框菜单选择 的全部内容, 来源链接: utcz.com/p/238247.html

回到顶部