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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
vuex操作state对象的实例代码
Apr 25 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
js实现无缝轮播图特效
May 09 Javascript
微信小程序实现页面左右滑动
Nov 16 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
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
海飞丝广告词
2014/03/20 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
初中毕业生自我评价
2015/03/02 职场文书
员工加薪申请报告
2015/05/15 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
在职证明范本
2015/06/15 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python