vuejs实现下拉框菜单选择
作者:Eternal-memory 时间:2023-09-23 08:49:54
本文实例为大家分享了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>
来源:https://blog.csdn.net/liuxin_1991/article/details/81181957
标签:vuejs,下拉框,菜单
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Django框架使用富文本编辑器Uedit的方法分析
2021-01-19 21:03:47
Python利用AutoGrad实现自动计算函数斜率和梯度
2023-09-27 22:47:59
![](https://img.aspxhome.com/file/2023/2/118512_0s.png)
Go 一般方法与接口方法接收者的差异详解
2024-04-27 15:38:52
js表格排序实例分析(支持int,float,date,string四种数据类型)
2024-05-03 15:30:24
python+requests接口压力测试500次,查看响应时间的实例
2021-09-29 08:27:56
![](https://img.aspxhome.com/file/2023/3/68373_0s.jpg)
sqlserver 触发器实例代码
2012-01-29 18:30:45
使用python os模块复制文件到指定文件夹的方法
2022-01-06 13:23:01
解析mysql 5.5字符集问题
2024-01-13 09:01:54
浅谈Python几种常见的归一化方法
2021-01-22 16:36:45
![](https://img.aspxhome.com/file/2023/4/66824_0s.gif)
python一绘制元二次方程曲线的实例分析
2023-08-23 00:49:56
利用bootstrapValidator验证UEditor
2024-04-16 08:47:26
![](https://img.aspxhome.com/file/2023/9/137019_0s.png)
利用Python如何实现一个小说网站雏形
2023-09-22 05:52:07
Windows下在CMD下执行Go出现中文乱码的解决方法
2024-04-25 15:17:27
SQL Server恢复模型之批量日志恢复模式
2024-01-28 07:34:22
![](https://img.aspxhome.com/file/2023/6/98036_0s.png)
python中元类用法实例
2023-10-24 19:12:29
在Python的Django框架上部署ORM库的教程
2021-04-08 02:20:47
Python+pyecharts绘制双动态曲线教程详解
2023-03-04 09:19:48
![](https://img.aspxhome.com/file/2023/4/99234_0s.png)
详解python中的Turtle函数库
2021-10-17 19:50:45
MySQL慢查询日志超详细总结
2024-01-17 00:17:21
教你怎么用python selenium实现自动化测试
2022-01-17 04:42:53
![](https://img.aspxhome.com/file/2023/2/93962_0s.png)