目標：用ul-li標簽結合Vue.js知識做一個模仿select標簽的下拉選項列表。

知識點：

組件的寫法及運用

組件之間的數據傳遞(props的運用)

組件之間的數據傳遞($emit的運用)

動態數據的綁定(v-bind)

自定義事件通信

效果圖：

1、未做任何操作前，下拉列表為隱藏狀態

2、點擊輸入框顯示下拉列表

3、 點擊列表項，輸入框值跟隨改變

PS: 為了演示data1,data2兩組數據的綁定，實例中創建了兩個列表

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下拉列表的實例(ul-li標簽仿select標簽)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持編程之家。

總結

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。