Vue 实现组件及组件嵌套

来源：互联网发布：面试什么是java线程池编辑：程序博客网时间：2024/06/15 00:53
效果如下：
左右互不相通，公用组件。
不废话，上代码
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件及组件嵌套</title>    <style>        html, body {            width: 100%;            margin: 0;            padding: 0;        }        .main {            width: 90%;            margin: 100px auto 0;            box-sizing: border-box;        }        .main div {            box-sizing: border-box;        }        .main-box {            float: left;            width: 45%;            min-height: 260px;            padding: 100px 0;            border: 1px solid #999;            background-color: #F05A10;        }        .main-work {            width: 80%;            min-height: 60px;            margin: 0 auto;            border-radius: 30px;            background-color: #EDEDED;        }        .main-work .main-work-top {            height: 60px;            padding: 5px 5%;        }        .main-work .main-work-top input[type="text"] {            width: 75%;            height: 50px;            margin: 0;            padding: 0;            border: 1px solid #999;            border-radius: 25px;            outline: none;            box-sizing: border-box;            background-color: #DEDEDE;            text-indent: 1em;            font-size: 20px;        }        .main-work .main-work-top button {            width:20%;            height: 50px;            margin: 0;            padding: 0;            background-color: #FF6600;            box-sizing: border-box;            border-radius: 25px;            font-size: 24px;            line-height: 46px;            color: #FFF;        }        .main-work .main-work-bottom {            width: 100%;            margin: 0;            padding: 5px 5%;            border: none;            box-sizing: border-box;            list-style: none;        }        .main-work .main-work-bottom li {            width: 75%;            height: 36px;            margin: 0;            padding: 0;            border-radius: 18px;            list-style: none;            text-indent: 1em;            font-size: 20px;            line-height: 36px;            color: #666;            cursor: pointer;        }        .main-work .main-work-bottom li:hover {            background-color: #FF6600;            color: #FFF;        }        .left {            float: left;        }        .right {            float: right;        }        .clearfix:after {            content: ".";            display: block;            clear: both;            height: 0;            overflow: hidden;            visibility: hidden;        }    </style>    <script type='text/javascript' src='./vue.js'></script></head><body>    <div id="app">        <div class="main clearfix">            <div class="main-box left">                <main-work                    v-bind:btn="btnOne"                ></main-work>            </div>            <div class="main-box right">                <main-work                    v-bind:btn="btnTwo"                ></main-work>            </div>        </div>    </div>    <script>        Vue.component('main-work', {            template:  `<div class="main-work">                            <div class="main-work-top clearfix">                                <input                                    type="text"                                    class="left"                                    v-model="input"                                    v-on:focus="showSelectListFunc"                                >                                <button                                    class="right"                                >{{btn}}</button>                            </div>                            <main-work-list                                v-on:setvalue="setvalue"                                v-bind:show="showSelectList"                            ></main-work-list>                        </div>`,            props: ['btn'],            data: function () {                return {                    input: '',                    showSelectList: false                }            },            methods: {                showSelectListFunc: function () {                    this.showSelectList = true;                },                hideSelectListFunc: function () {                    this.showSelectList = false;                },                setvalue: function (list, show) {                    this.input = list;                    this.showSelectList = !show;                }            }        })        Vue.component('main-work-list', {            template:  `<ul                            class="main-work-bottom"                            v-show="show"                        >                            <li                                v-for="list in lists"                                v-on:click="selectList(list)"                            >{{list}}</li>                        </ul>`,            props: ['show'],            data: function () {                return {                    lists: [                        'html+css',                        'html5+css3',                        'javascript',                        'angular',                        'react',                        'vue',                        'jquery',                        'oh,',                        'fuck'                    ]                }            },            methods: {                selectList: function (list) {                    this.$emit('setvalue', list, this.show);                }            }        })        var app = new Vue({            el: '#app',            data: {                btnOne: '查询',                btnTwo: '搜索'            }        })    </script></body></html>
0 0
Vue 实现组件 及 组件嵌套

Vue 实现组件及组件嵌套
