腾讯十天Vue.js课程之六：组件

来源：互联网发布：sql server 2012 下载编辑：程序博客网时间：2024/05/16 13:57
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <link type="text/css" rel="stylesheet" href="style.css">    <script src="../js/vue.js"></script></head><body><div id="app">    <h2>自定义的下拉框</h2>    <customer-selector btn-value="查询"></customer-selector>    <h2>自定义的下拉框2</h2>    <customer-selector btn-value="搜索"></customer-selector></div><script>//    var obj = {//        selectShow: false//    };    //全局注册组件            Vue.component("customer-selector",{                data: function () {                    return {                        selectShow: false                    };                },                props:["btnValue"],                template: `<section class="warp">                                <div class="searchIpt clearFix">                                    <div class="clearFix">                                        <input type="text" class="keyword" value="" @click="selectShow = !selectShow">                                        <input type="button" :value="btnValue">                                        <span></span>                                    </div>                                    <custom-list v-show="selectShow"></custom-list>                                </div>                            </section>`            });    Vue.component("custom-list",{        template: `<ul class="list">                                        <li>html+css</li>                                        <li>html5+css3</li>                                        <li>javascript</li>                                        <li>angular</li>                                        <li>vue</li>                                        <li>react</li>                                        <li>jquery</li>                                        <li>nodejs</li>                                    </ul>`    })    new Vue({        el: "#app",    })</script></body></html>
0 0