目標(biāo)：用ul-li標(biāo)簽結(jié)合Vue.js知識(shí)做一個(gè)模仿select標(biāo)簽的下拉選項(xiàng)列表。

知識(shí)點(diǎn)：

組件的寫(xiě)法及運(yùn)用

組件之間的數(shù)據(jù)傳遞(props的運(yùn)用)

組件之間的數(shù)據(jù)傳遞($emit的運(yùn)用)

動(dòng)態(tài)數(shù)據(jù)的綁定(v-bind)

自定義事件通信

效果圖：

1、未做任何操作前，下拉列表為隱藏狀態(tài)

2、點(diǎn)擊輸入框顯示下拉列表

3、 點(diǎn)擊列表項(xiàng)，輸入框值跟隨改變

PS: 為了演示data1,data2兩組數(shù)據(jù)的綁定，實(shí)例中創(chuàng)建了兩個(gè)列表

ul-li模仿select下拉菜單

CSS樣式

Box 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.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持編程之家。

總結(jié)

如果覺(jué)得編程之家網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內(nèi)容來(lái)源于網(wǎng)友網(wǎng)絡(luò)收集整理提供，作為學(xué)習(xí)參考使用，版權(quán)屬于原作者。

小編個(gè)人微信號(hào) jb51ccc

喜歡與人分享編程技術(shù)與工作經(jīng)驗(yàn)，歡迎加入編程之家官方交流群！

總結(jié)

以上是生活随笔為你收集整理的html下拉列表用ul,Vue.js做select下拉列表的实例(ul-li标签仿select标签)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。