Vue.js做select下拉列表的实例(ul-li标签仿select标签)


Posted in Javascript onMarch 02, 2018

目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。

知识点:

组件的写法及运用

组件之间的数据传递(props的运用)

组件之间的数据传递($emit的运用)

动态数据的绑定(v-bind)

自定义事件通信

效果图:

1、未做任何操作前,下拉列表为隐藏状态

Vue.js做select下拉列表的实例(ul-li标签仿select标签)

2、点击输入框显示下拉列表

Vue.js做select下拉列表的实例(ul-li标签仿select标签)

3、 点击列表项,输入框值跟随改变

Vue.js做select下拉列表的实例(ul-li标签仿select标签)

PS: 为了演示data1, data2两组数据的绑定,实例中创建了两个列表

Vue.js做select下拉列表的实例(ul-li标签仿select标签)

html代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ul-li模仿select下拉菜单</title>
 <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" />
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="demo">
  <my-select btn-name='search' v-bind:list='data1' style='float: left;margin-right: 2rem;'></my-select>
  <my-select btn-name='搜索' v-bind:list='data2' style='float: left;'></my-select>
 </div>
</body>
</html>

JavaScript代码

<script type="text/javascript">
//注册全局组件
//在my-select组件中套用ul-select组件,my-select为父组件ul-select为子组件
Vue.component('my-select', {
 //组件中data要写成函数形式
 data() {
  return {
   ulShow: false, //默认ul不显示,单击input改变ul的显示状态
   selectVal: '' //选项值,input的值与选项值动态绑定
  }
 },
 //父组件向子组件通信用props
 props: ['btnName', 'list'],
 template: `
  <div id="selectWrap">
   <div class="searchBox">
    <input type="text" :value="selectVal" @click='ulShow = !ulShow'/>
    <a href="#" rel="external nofollow" class="search" v-text='btnName'></a>
   </div>
    <my-ul v-show='ulShow' v-bind:list='list' v-on:receive='changeVal'></my-ul>
   </div>
 `,
 methods: {
  changeVal(value) {
   this.selectVal = value
  }
 }
})
//子组件
Vue.component('my-ul', {
 props: ['list'],
 template: `
  <ul class="skill">
   <li v-for='item of list' v-on:click='selectLi(item)'>{{item}}</li>
  </ul>
 `,
 methods: {
  selectLi: function(item) {
   //$emit触发当前实例上的自定义事件 receive
   this.$emit('receive', item);
  }
 }
})
//创建Vue实例
new Vue({
 el: '#demo',
 //定义两组数据分别传递到两个组件的li中,两个列表的操作互不影响
 data: {
  data1: ['CSS', 'HTML', 'JavaScript'],
  data2: ['Vue.js', 'Node.js', 'Sass'],
 }
})
</script>

CSS样式

ul, li {
 margin: 0;
 padding: 0;
 list-style: none;
}
#selectWrap {
 width: 250px;
 padding: 2rem;
 background: #4682b4;
}
.searchBox input, .searchBox a {
 line-height: 1.5rem;
 height: 1.5rem;
 margin-bottom: 1rem;
 padding: 0 5px;
 vertical-align: middle;
 border: 1px solid #aaa;
 border-radius: 5px;
 outline: none;
}
.searchBox a {
 display: inline-block;
 text-decoration: none;
 background-color: #b1d85c;
}
.skill li {
 font-size: 18px;
 line-height: 2rem;
 height: 2rem;
 padding-left: 5px;
 cursor: pointer;
}
.skill li:hover {
 background-color: #008b45;
}

以上这篇Vue.js做select下拉列表的实例(ul-li标签仿select标签)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
vue element-ui table表格滚动加载方法
Mar 02 #Javascript
浅谈React组件之性能优化
Mar 02 #Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 #Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 #Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 #Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 #Javascript
详解node.js 下载图片的 2 种方式
Mar 02 #Javascript
You might like
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python制作图片缩略图
2019/04/30 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书