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 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
OpenLayers实现图层切换控件
Sep 25 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php实现数字补零的方法总结
2018/09/12 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Django发送html邮件的方法
2015/05/26 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
python 下划线的不同用法
2020/10/24 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
财务人员个人求职信范文
2013/12/04 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
应届生求职信范文
2014/05/26 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书