Vue.js仿Select下拉框效果


Posted in Javascript onFebruary 18, 2020

本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下

废话少说,直接上图上代码:

效果图:

Vue.js仿Select下拉框效果

HEML:

<div id="demo">
 
 <h2 class="title">自定义下拉框</h2>
 <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-select>
 
 <h2 class="title">自定义下拉框</h2>
 <imitate-select h2-value="第二个 Select" v-bind:list="list2"></imitate-select>
 
</div>

Javascript:

<script>
 // 注册组件【 全局 】
 Vue.component('imitate-select', {
  data: function(){ // 给每一个添加一个自己的对象
   return {
    selectShoe: false,
    val: ''
   }
  },
  props: ['h2Value', 'list'], // 这里的名称一定是驼峰式【如:上面是 h2-value(上面可以是烤串或驼峰式) ,下面必须是 h2Value】
  template: `<section class="main">
      <div class="select">
       <h2 class="fuzhi">{{ h2Value }}</h2>
       <div class="select_header">
        <input type="text" class="select_input" placeholder="模仿Select下拉框" @click="selectShoe = !selectShoe" :value="val" ><i></i>
       </div>
       <select-list v-show="selectShoe" :list="list" @receive="changeHandle"></select-list>
      </div>
     </section>`,
  methods: {
   changeHandle(value){ // 自定义事件
    // alert('我被触发了!值为:' + value)
    this.val = value
   }
  }
 });
 
 Vue.component('select-list', {
  props: ['list'],
  template: `<ul class="select_list">
      <li v-for="item of list" @click="selectHandle(item)">{{ item }}</li>
     </ul>`,
  methods: {
   selectHandle: function (item){
    this.$emit('receive', item)
   }
  }
 });
 
 new Vue({
  el: '#demo',
  data: {
   list1: ['HTML','CSS','Javascript','Vue.js'],
   list2: ['PHP','JAVA','C++','.NET']
  }
 })
</script>

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
vue+ts下对axios的封装实现
Feb 18 #Javascript
ES6中Promise的使用方法实例总结
Feb 18 #Javascript
React中获取数据的3种方法及优缺点
Feb 18 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
详解puppeteer使用代理
2018/12/27 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
小区门卫管理制度
2014/01/29 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
活动总结格式
2014/08/30 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书