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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
vue-cli3单页构建大型项目方案
Apr 07 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
清除输入框内的空格
2016/12/21 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
几道PHP面试题
2013/04/14 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
求职自荐信格式
2013/12/04 职场文书
文明班集体申报材料
2014/05/23 职场文书
学习礼仪心得体会
2014/09/01 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书