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

最新推荐文章于 2023-10-31 16:05:04 发布

原创最新推荐文章于 2023-10-31 16:05:04 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的自定义下拉框组件，该组件可通过传递不同按钮值来展示不同的交互行为，并附带了一个包含多种技术选项的列表。

<!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>