溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了Vue.js仿Select下拉框效果的具體代碼，供大家參考，具體內容如下
廢話少說，直接上圖上代碼：
效果圖：
HEML：
<div id="demo"> <h3 class="title">自定義下拉框</h3> <imitate-select h3-value="第一個 Select" v-bind:list="list1"></imitate-select> <h3 class="title">自定義下拉框</h3> <imitate-select h3-value="第二個 Select" v-bind:list="list2"></imitate-select> </div>
Javascript：
<script>
// 注冊組件【 全局 】
Vue.component('imitate-select', {
data: function(){ // 給每一個添加一個自己的對象
return {
selectShoe: false,
val: ''
}
},
props: ['h3Value', 'list'], // 這里的名稱一定是駝峰式【如：上面是 h3-value（上面可以是烤串或駝峰式） ，下面必須是 h3Value】
template: `<section class="main">
<div class="select">
<h3 class="fuzhi">{{ h3Value }}</h3>
<div class="select_header">
<input type="text" class="select_input" placeholder="模仿Select下拉框" @click="selectShoe = !selectShoe" :value="val" ><i></i>
</div>
<select-list v-show="selectShoe" :list="list" @receive="changeHandle"></select-list>
</div>
</section>`,
methods: {
changeHandle(value){ // 自定義事件
// alert('我被觸發了！值為：' + value)
this.val = value
}
}
});
Vue.component('select-list', {
props: ['list'],
template: `<ul class="select_list">
<li v-for="item of list" @click="selectHandle(item)">{{ item }}</li>
</ul>`,
methods: {
selectHandle: function (item){
this.$emit('receive', item)
}
}
});
new Vue({
el: '#demo',
data: {
list1: ['HTML','CSS','Javascript','Vue.js'],
list2: ['PHP','JAVA','C++','.NET']
}
})
</script>
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
