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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
node中koa中间件机制详解
Aug 22 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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无限遍历目录示例
2014/02/21 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python中的字符串内部换行方法
2018/07/19 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
python简单实现插入排序实例代码
2020/12/16 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
住房租房协议书
2014/08/20 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
建房合同协议书
2016/03/21 职场文书
详解python字符串驻留技术
2021/05/21 Python
把77A收信机改造成收音机
2022/04/05 无线电
MySQL池化框架学习接池自定义
2022/07/23 MySQL