您好,登錄后才能下訂單哦!
這篇“Vue如何實(shí)現(xiàn)select下拉列表”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue如何實(shí)現(xiàn)select下拉列表”文章吧。
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ul-li模仿select下拉菜單</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" /> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="demo"> <my-select btn-name='search' v-bind:list='data1' style='float: left;margin-right: 2rem;'></my-select> <my-select btn-name='搜索' v-bind:list='data2' style='float: left;'></my-select> </div> </body> </html>
JavaScript代碼
<script type="text/javascript"> //注冊全局組件 //在my-select組件中套用ul-select組件,my-select為父組件ul-select為子組件 Vue.component('my-select', { //組件中data要寫成函數(shù)形式 data() { return { ulShow: false, //默認(rèn)ul不顯示,單擊input改變ul的顯示狀態(tài) selectVal: '' //選項(xiàng)值,input的值與選項(xiàng)值動(dòng)態(tài)綁定 } }, //父組件向子組件通信用props props: ['btnName', 'list'], template: ` <div id="selectWrap"> <div class="searchBox"> <input type="text" :value="selectVal" @click='ulShow = !ulShow'/> <a href="#" rel="external nofollow" class="search" v-text='btnName'></a> </div> <my-ul v-show='ulShow' v-bind:list='list' v-on:receive='changeVal'></my-ul> </div> `, methods: { changeVal(value) { this.selectVal = value } } }) //子組件 Vue.component('my-ul', { props: ['list'], template: ` <ul class="skill"> <li v-for='item of list' v-on:click='selectLi(item)'>{{item}}</li> </ul> `, methods: { selectLi: function(item) { //$emit觸發(fā)當(dāng)前實(shí)例上的自定義事件 receive this.$emit('receive', item); } } }) //創(chuàng)建Vue實(shí)例 new Vue({ el: '#demo', //定義兩組數(shù)據(jù)分別傳遞到兩個(gè)組件的li中,兩個(gè)列表的操作互不影響 data: { data1: ['CSS', 'HTML', 'JavaScript'], data2: ['Vue.js', 'Node.js', 'Sass'], } }) </script>
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具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
以上就是關(guān)于“Vue如何實(shí)現(xiàn)select下拉列表”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。