【IMWeb训练营作业2】-select

来源：互联网发布：rng淘宝官方旗舰店编辑：程序博客网时间：2024/06/15 13:11

主要的Vue函数代码:

<script>            Vue.component('custom-select',{                data:function () {                    return {                        selectShow:false,                        val:''                    };                },                props:['btn','list'],                template:`<section class="warp">        <div class="searchIpt clearFix">            <div class="clearFix">                <input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />                <input type="button" :value="btn">                <span></span>            </div>            <custom-list v-show="selectShow" :list="list" @receive="changeValueHandle"></custom-list>        </div>    </section>`,                methods:{                    changeValueHandle(value){                        this.val = value;                    }                }            });            Vue.component('custom-list',{                props:['list'],               template:`<ul class="list">                <li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>            </ul>`,                methods:{                    selectValueHandle:function (item) {                        this.$emit('receive',item);                    }                }            });            var data = {                list1:['1','2','3'],                list2:['a','b','c']            };            new Vue({                el:'#app',                data:{                    list1:['1','2','3'],                    list2:['a','b','c']                }            });        </script>

最终运行效果图:

0 0