【IMWeb训练营作业2】-select

最新推荐文章于 2017-04-25 11:19:30 发布

hqxczjx

最新推荐文章于 2017-04-25 11:19:30 发布

阅读量253

点赞数

文章标签： vue-js

本文链接：https://blog.csdn.net/hqxczjx/article/details/70406027

版权

主要的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>