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 $.ajax入门应用二
Nov 19 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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
留言板翻页的实现详解
2006/10/09 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
nginx下安装php7+php5
2016/07/31 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
解析Python中while true的使用
2015/10/13 Python
全面分析Python的优点和缺点
2018/02/07 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
房地产员工找工作的自我评价
2013/11/15 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
财务审计整改报告
2014/11/06 职场文书
高中美术教学反思
2016/02/17 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Apache POI的基本使用详解
2021/11/07 Servers
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL