Vue.js做select下拉列表（ul-li標籤仿select標籤）

阿新 • • 發佈：2019-02-20

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

元件的寫法及運用
元件之間的資料傳遞（props的運用）
元件之間的資料傳遞（$emit的運用）
動態資料的繫結（v-bind）
自定義事件通訊

效果圖：

1、未做任何操作前，下拉列表為隱藏狀態
未操作前
2、點選輸入框顯示下拉列表

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

PS: 為了演示data1, data2兩組資料的繫結，例項中建立了兩個列表
這裡寫圖片描述

html程式碼：

<!DOCTYPE html>
<html>

<head>
    <meta 
 charset="UTF-8">
    <title>ul-li模仿select下拉選單</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <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要寫成函式形式
    data() {
        return {
            ulShow: false, //預設ul不顯示，單擊input改變ul的顯示狀態
            selectVal: ''  //選項值，input的值與選項值動態繫結
        }
    },
    //父元件向子元件通訊用props
    props: ['btnName', 'list'],
    template: `
        <div id="selectWrap">
            <div class="searchBox">
                <input type="text"  :value="selectVal"  @click='ulShow = !ulShow'/>
                <a href="#" 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觸發當前例項上的自定義事件 receive
            this.$emit('receive', item);
        }
    }
})

//建立Vue例項
new Vue({
    el: '#demo',
    //定義兩組資料分別傳遞到兩個元件的li中，兩個列表的操作互不影響
    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.js做select下拉列表（ul-li標籤仿select標籤）

目標：用ul-li標籤結合Vue.js知識做一個模仿select標籤的下拉選項列表。知識點：元件的寫法及運用元件之間的資料傳遞（props的運用）元件之間的資料傳遞（$emit的運用）動

Vue.js元件封裝——下拉列表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"&g

js操作select下拉列表

js操作select下拉列表一，通過已有的值，與select的值比較，並將其設定為預設 select程式碼： <select name="tigong" id="tigong"> <option value="null">--全部--</

select 下拉列表選擇框效果及美化（before 和 after偽元素的妙用）

color dem cti relative ccs ota otto center round 參考博客：https://github.com/chokcoco http://www.cnblogs.com/libin-1/p/5766

select 下拉列表選擇框效果及美化（before 和 after偽元素的妙用）

參考部落格：https://github.com/chokcoco http://www.cnblogs.com/libin-1/p/5766729.html http://www.cnblogs.com/coco1s/p/5667853.html http://sbco.cc/magicCss/

原生js實現對select下拉列表的內容過濾

function selectOnchange(){ // alert("下拉內容改變了") // targetChangeFunction(obj) } <!-

JAVA EE 專案常用知識之AJAX技術實現select下拉列表聯動的兩種用法（讓你真正理解ajax）

ajax 下拉列表聯動的用法。 ajax的定義： AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 ajax效果的一個例子：區域為

JavaScript 驗證表單不為空和獲取select下拉列表的值和文本

blog car form 是你 mys 獲取 document options 身份證 1.驗證表單不為空 var hasform = { "Name": "名字", "Id_card": "身份證", "PaySalary": "月工資",

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

Vue 表格裏的下拉列表

ESS computed line method edit team for eth text 下拉列表column-select.vue組件內容： <template> <div class="column-select-wrapper">

android下拉列表（spinner）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_

JavaScript做DIV下拉列表

Posted on 2017-12-07 19:02 神筆碼農閱讀(847) 評論(0) 編輯收藏 1.設定下拉列表： 2.設定“menu”預設為隱藏： display：none；

級聯下拉列表（三級）

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport

jQuery_wuui select 下拉列表資料渲染

<div class="weui-cells" style="margin-top: 0"> <div class="weui-cell"> <div class="weui-cell__hd"><label for="select-

s標籤s:select下拉列表的使用

現象：jsp頁面中s:select標籤的使用原因：在struts2框架開發中，有時候jsp頁面需要用s標籤來寫，因為s標籤能自動讀取值棧中相匹配的欄位資訊。其中s:select怎麼使用呢？解決方案： 1：當下拉列表的選項固定且簡單的時候可以使

select下拉列表和 radio單選按鈕控制元件開關---- 根據值選擇選項 & change事件

select option選項 1）下拉列表根據值，選中其中一個選項：根據value值選中： $("#orientation option[value= '"+ orientation_val +"']").attr('selected',true); 根據text值選

Android學習之listView顯示下拉列表（2）（SimpleAdapter介面卡）

ListView顯示下拉列表（2）（SimpleAdapter介面卡）上一篇文章我大概介紹了listView的主要功能以及用ArrayAdapter陣列介面卡實現純文字的下拉列表。但是在現實生活中，純文字的使用率不是很高，更多的

關於相容ie8的圓角和select下拉列表

首先處理下border-radius在ie8下的相容問題；因為這個屬性是css3中的，ie8根本不知道你是誰好麼？那我們就得找辦法了，經過我千辛萬苦的百度和google去解決它，總結下來感覺就這個方法比較好用；那就直接上程式碼了，一木瞭然： <!DOCTY

element-ui中的select下拉列表設定預設值

element-ui中的select下拉列表如何設定預設值？在element-ui的運用中，涉及到了select下拉列表。專案中需要將select的預設值給展示出來那如何修改呢？上element-ui中的程式碼片段 <template&g

html 中可以自定義輸入的 select 下拉列表

在專案開發中，往往有這種需求：那就是需要下拉選擇已有的資料列表，當沒有自己需要的資料時，往往需要去管理這些列表資料的畫面去新增，或者在下拉列表後面放一個快捷按鈕，先新增，然後再選。那麼問題就來了，如果按照上面的操作，往往需要很多步驟，能不能當沒有可選專案時，直接在下拉

Vue.js做select下拉列表（ul-li標籤仿select標籤）

相關推薦