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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
CSDN轮换广告图片轮换效果
Mar 27 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JavaScript类的写法
Sep 17 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
面试常见的js算法题
Mar 23 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Python读大数据txt
2016/03/28 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
Java编程面试题
2016/04/04 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
建材投资建议书
2014/05/16 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
原告代理词范文
2015/05/25 职场文书
如何书写邀请函?
2019/06/24 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python