Vue. js is used as the select drop-down list instance (ul-li label is similar to select label), vue. jsul-li

Vue. js is used as the select drop-down list instance (ul-li label is similar to select label), vue. jsul-li

Objective: To use the ul-li label and Vue. js knowledge to create a drop-down list that imitates the select label.

Knowledge point:

Component writing and Application

Data transmission between components (using props)

Data transmission between components ($ emit Application)

Dynamic Data Binding (v-bind)

Custom Event Communication

:

1. The drop-down list is hidden before any operations are performed.

2. Click the drop-down list in the input box.

3. Click the list item and the input box value changes accordingly.

PS: to demonstrate the binding of data1 and data2 data groups, two lists are created in the instance.

Html code:

<! DOCTYPE html> 
JavaScript code
<Script type = "text/javascript"> // register the global component // apply the ul-select component to the my-select component, my-select is the parent component ul-select is the child component Vue. component ('My-select', {// the data in the component must be written as the function form data () {return {ulShow: false, // ul is not displayed by default, click input to change the display status of ul: selectVal: ''// option value. The input value is dynamically bound to the option value}. // The parent component uses props to communicate with the child component: ['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 }}) // sub-component 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 triggers the Custom Event receive this on the current instance. $ emit ('receive ', item) ;}}) // create a Vue instance new Vue ({el:' # demo ', // define the two groups of data to be transmitted to the li of the two components. The operations on the two lists do not affect each other. data: {data1: ['css ', 'html', 'javascript '], data2: ['vue. js', 'node. js', 'sass '], }}) </script>
CSS style
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;}
The above Vue. examples of js select drop-down lists (ul-li tags are similar to select tags) are all the content shared by Alibaba Cloud. I hope to give you a reference and support for the customer's house.