【IMWeb训练营作业02 select组件】

来源：互联网发布：python编写抢购软件编辑：程序博客网时间：2024/06/05 04:40

效果图

这里写图片描述

Vue提供了Vue.component来全局注册组件，也可以使用局部注册。在这个简单的例子中使用props从父组件向子组件传递数据。

代码

<div id="app">        <z-select :lists="list01"></z-select>        <z-select :lists="list02"></z-select>    </div>    <script>    Vue.component('z-select',{        template:`<section class="waarp" >    <div class="searchInput clearfix">        <div class="clearfix">            <input type="text" class="keyword" value="" @click="selectValue = !selectValue">            <input type="button" value="GO">            <span></span>        </div>          <ul class="list" v-show="selectValue">            <li v-for="item in lists">{{item}}</li>        </ul>    </div></section>`,    props:['lists'],    data(){        return {            selectValue:false        }    }    })        var vm = new Vue({            el:'#app',            data:{                list01:['html','html5','css','css3'],                list02:['angular','vue','react']            }        })    </script>

0 0