<template>
<div>
<ul class="skill">
<li v-for='item of list' v-on:click='selectLi(item)'>{{item}}</li>
</ul>
</div>
</template> <script>
export default {
name:'myul',
props: ['list'],
methods: {
selectLi: function(item) {
//$emit触发当前实例上的自定义事件 receive
this.$emit('receive', item);
}
}
}
</script>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.skill li {
font-size: 18px;
line-height: 2rem;
height: 2rem;
padding-left: 5px;
cursor: pointer;
}
.skill li:hover {
background-color: #008b45;
}
</style>
<template>
<div>
<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>
<div>
<myul v-show='ulShow' v-bind:list='list' v-on:receive='changeVal'></myul>
</div>
</div>
</template> <script>
import Vue from 'vue'
import myul from './myul'
Vue.component("myul", myul)
export default {
name:'myselect',
data() {
return {
ulShow: false, //默认ul不显示,单击input改变ul的显示状态
selectVal: '' //选项值,input的值与选项值动态绑定
}
},
props: ['btnName', 'list'],
methods: {
changeVal(value) {
this.selectVal = value
}
}
}
</script>
<style>
#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;
}
</style>

  

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import myselect from './myselect' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
data: {
data1: ['CSS', 'HTML', 'JavaScript']
},
components: {myselect},
template: "<myselect btn-name='search' v-bind:list='data1' style='float: left;margin-right: 2rem;'></myselect>" })

  

VUE:Select2的更多相关文章

  1. vue2组件之select2调用

    目前,项目中使用了纯前端的静态项目+RESTFul接口的模式.为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如vue-route等功能,也 ...

  2. 随手记录一下 Vue 下来框搜索 select2 封装成vue

    引入布局文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css& ...

  3. vue 组建实现数据的双向绑定

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

  4. 解决vue与传统jquery插件冲突

    比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...

  5. 比较好的前端方法库及一些vue如何引入静态文件

    https://select2.github.io/examples.html   select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizqu ...

  6. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  7. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. Vuejs自定义select2指令

    在做select2插件的时候遇到一些坑,最终解决如下: Vue.directive('select2', { inserted: function (el, binding, vnode) { var ...

  9. vue项目开发基本目录结构

    § 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...

随机推荐

  1. 【AtCoder】AGC007

    AGC007 A - Shik and Stone 如果i + j走过的格子只有一个,那么就是可以走到 #include <bits/stdc++.h> #define fi first ...

  2. Linux系列(15)之进程管理

    详细情况查看:https://www.cnblogs.com/dengyungao/p/8523628.html 1.查看进程 有两个命令可以查看进程,分别是ps与top(推荐使用),那他们有什么区别 ...

  3. loj 10117 简单题

    #include<iostream> #include<cstdio> #include<cctype> using namespace std; inline i ...

  4. docker 入门4 - 群 【翻译】

    开始,第 4 部分:群 先决条件 安装 Docker 版本 1.13 或更高版本. 获取第 3 部分先决条件中所述的 Docker Compose. 获取 Docker Machine, Mac 的 ...

  5. Inversion 多校签到题

    存下值和下标后排序,每次从坐后面开始取就可以了. ac代码: #include <algorithm> #include <cstdio> #include <cstri ...

  6. C#添加带验证的websevice接口

    记录一下,方便下次使用,或者能帮助到别人. 一.添加服务引用,输入WSDL文件地址. 二.代码 public TESTClient TestContext() { var binding = new ...

  7. STM32 USB Virtual COM

    STM32 USB Virtual COM USB转串口的功能实现   这次讲的是如何实现USB转串口功能的实现.首先看看工程的布局吧: 我们主要要介绍的文件的在USB_User这个组文件.从上面的截 ...

  8. DIP常用资源整理

    Deep Learning(深度学习): ufldl的2个教程(这个没得说,入门绝对的好教程,Ng的,逻辑清晰有练习):一 ufldl的2个教程(这个没得说,入门绝对的好教程,Ng的,逻辑清晰有练习) ...

  9. 【原创】大叔经验分享(82)logstash一个实例运行多个配置文件

    logstash一个实例运行多个配置文件,将所有配置文件放到以下目录即可 /usr/share/logstash/pipeline 但是默认行为不是每个配置文件独立运行,而是作为一个整体,每个inpu ...

  10. ECMAScript中的原型继承

    //ECMAScript中的原型继承//ECMAScript中的继承主要是依靠原型链实现的.(关于原型链的介绍,详见<高三>6.3.1章节 P162) //本文示例主要为了说明SubTyp ...