vuejs实现下拉框菜单选择


Posted in Javascript onOctober 23, 2020

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

vuejs实现下拉框菜单选择

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

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

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

Javascript 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
vue 如何使用递归组件
Oct 23 #Javascript
vue 如何从单页应用改造成多页应用
Oct 23 #Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 #Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
vue项目配置同一局域网可使用ip访问的操作
Oct 23 #Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 #Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 #Javascript
You might like
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
python传递参数方式小结
2015/04/17 Python
python引用DLL文件的方法
2015/05/11 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
对照检查剖析材料
2014/09/30 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers