HTML怎么在li中加select标签,Vue.js做select下拉列表的实例(ul-li标签仿select标签)_莺语_前端开发者...

目标：用ul-li标签结合

知识点：

组件的写法及运用

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

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

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

自定义事件通信

效果图：

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

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

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

PS: 为了演示data1, data2两组数据的绑定，实例中创建了两个列表

/p>

JavaScript代码

//注册全局组件

//在my-select组件中套用ul-select组件，my-select为父组件ul-select为子组件

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.开发者。