真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Vue.js如何實現select下拉列表

這篇文章主要為大家展示了“Vue.js如何實現select下拉列表”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue.js如何實現select下拉列表”這篇文章吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供城口網站建設、城口做網站、城口網站設計、城口網站制作等企業(yè)網站建設、網頁設計與制作、城口企業(yè)網站模板建站服務，十年城口做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

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

知識點：

組件的寫法及運用

組件之間的數據傳遞（props的運用）

組件之間的數據傳遞（$emit的運用）

動態(tài)數據的綁定（v-bind）

自定義事件通信

效果圖：

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

Vue.js如何實現select下拉列表

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

Vue.js如何實現select下拉列表

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

Vue.js如何實現select下拉列表

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

Vue.js如何實現select下拉列表

html代碼：




 
 ul-li模仿select下拉菜單

JavaScript代碼


//注冊全局組件
//在my-select組件中套用ul-select組件，my-select為父組件ul-select為子組件
Vue.component('my-select', {
 //組件中data要寫成函數形式
 data() {
  return {
   ulShow: false, //默認ul不顯示，單擊input改變ul的顯示狀態(tài)
   selectVal: '' //選項值，input的值與選項值動態(tài)綁定
  }
 },
 //父組件向子組件通信用props
 props: ['btnName', 'list'],
 template: `

{{item}} `, methods: { selectLi: function(item) { //$emit觸發(fā)當前實例上的自定義事件 receive this.$emit('receive', item); } } }) //創(chuàng)建Vue實例 new Vue({ el: '#demo', //定義兩組數據分別傳遞到兩個組件的li中，兩個列表的操作互不影響 data: { data1: ['CSS', 'HTML', 'JavaScript'], data2: ['Vue.js', 'Node.js', 'Sass'], } })

CSS樣式

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.js如何實現select下拉列表”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網頁名稱：Vue.js如何實現select下拉列表
網頁鏈接：http://weahome.cn/article/ihsgci.html