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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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
php中数据的批量导入(csv文件)
2006/10/09 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
javascript import css实例代码
2008/07/18 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
在Django中创建第一个静态视图
2015/07/15 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
《都江堰》教学反思
2014/02/07 职场文书
英语求职信范文
2014/05/23 职场文书
党委班子对照检查材料
2014/08/19 职场文书
兴趣班停课通知
2015/04/24 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers