Vue.js做挑选下拉列表的实例(ul-li标签仿挑选标签)

目标：用ul-li标签结合Vue.js知识做一个模仿挑选标签的下拉选项列表。

知识点：

组件的写法及运用

组件之间的数据传递（道具的运用)

组件之间的数据传递($emit的运用)

动态数据的绑定(v-bind)

自定义事件通信

效果图：

1、未做任何操作前，下拉列表为隐藏状态

2、点击输入框显示下拉列表

3、 点击列表项，输入框值跟随改变

PS:为了演示数据1、数据2两组数据的绑定，实例中创建了两个列表

超文本标记语言代码：

！DOCTYPE html html head meta charset=' UTF-8 ' title ul-Li模仿挑选下拉菜单/title link rel='样式表type=' text/CSS ' href=' style。CSS ' rel='外部no follow '/脚本src=' http :3359 unpkg。com/vue/dist/vue。js '/script/head body div id=' demo ' my-select BTN-name=' search ' v-bind : list=' data 1 ' style=' float 3360 left；右边距： 2雷姆/my-select my-select btn-name='搜索v-bind : list=' data 2 ' style=' float : left；/my-select/div/body/HTMl JAVAScript代码

脚本类型='text/javascript'//注册全局组件//在我的选择组件中套用ul-select组件，我的选择为父组件ul-select为子组件Vue.component('my-select '，{ //组件中数据要写成函数形式data() { return { ulShow: false，//默认保险商实验所不显示，单击投入改变保险商实验所的显示状态selectVal: '' //选项值，输入的值与选项值动态绑定} }, //父组件向子组件通信用prop :[' BTN name '，' list']，模板： ' div id=' selectWrap ' div class=' search box '输入类型=' text ' : value=' selectVal ' @ click=' ulShow=！ulShow/a href=' # ' rel=' external no follow ' class=' search ' v-text=' BtNname '/a/div my-ul v-show=' ulShow ' v-bind : list=' list ' v-: receive=' change VaL '/my-ul/div `，methods : { change VaL(value){ this。selectval=value } })//子组件Vue.component('my-ul '，{ prop :[' list ']，template : ` ul class=' skill ' Li v-for=' item of list ' v-: click=' selectLi(item)' { { item } }/Li/ul `，methods : { selectLi : function(item){/$ emit触发当前实例上的自定义事件收到这个$emit('receive '，item)；} }})//创建某视频剪辑软件实例新Vue({ el: '#demo '，//定义两组数据分别传递到两个组件的里中，两个列表的操作互不影响data: { data1: ['CSS '，' HTML '，' JavaScript']，data2: ['Vue.js '，' Node.js '，' Sass']，}})/scriptCSS样式

ul，Li { margin : 0；padd : 0；列表样式：无；} # select wrap { width : 250 pxpadding : 2 rem背景技术# 4682b4}。searchBox输入，搜索框a {行高： 1.5雷姆；高度： 1.5雷姆；保证金-底部： 1元；padding: 0 5px垂直对齐： 中间；border: 1px实心# AAA border-radius : 5px；大纲：无；}.searchBox a { display:内联块；文本装饰：无；背景-颜色： # b1d 85c}.技能李{ font-size : 18px线高： 2雷姆；高度： 2毫米左衬垫左： 5pxcursor:指针；}.技能李：悬停{底色： # 008 b45}以上这篇Vue.js做挑选下拉列表的实例(ul-li标签仿挑选标签)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。