zoukankan      html  css  js  c++  java
  • vue组件封装选项卡

    <template>
        <myMenu :arr='arr' :arrcontent='content'></myMenu>
    </template>
    <script>
    import myMenu from './MyMenu'
      export default{
        data(){
          return {
            arr:['aa','bb','cc'],
            content:['aa content','bb content','cc content']
          }
        },
        components:{
            myMenu
        }
      }
    </script>
    //模板块 父
    <template>
       <div class="tab">
            <ul>
                <li v-for="(item,ind) in this.arr" :key="ind" 
                    :class="{active:cur===ind}"
                    @click="cur=ind">{{item}}</li>
            </ul> 
            <div class="content">
                <component :is="list[cur]"></component>
            </div>  
        </div>
    </template>
    <script>
        export default{
            props:['arrcontent','arr'], 
            data(){
                return {
                    cur:0,
                    list:[]
                }
            },
            created(){
                for(let i = 0; i<this.arrcontent.length ; i++){
                        this.list.push({template:'<div>'+this.arrcontent[i]+'</div>'})
                }
            }
        }
    </script>
    <style scoped>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        li{
             100px;
            text-align: center;
            float: left;
        }
        .active{
            background: skyblue;
            color: white;
        }
        .content{
             300px;
            height: 250px;
            background: salmon;
            font-size: 50px;
            line-height: 250px;
        }
        .tab{
            overflow: hidden;
        }
    </style>
    //子组件

    效果图 基于vue-cli的组件

  • 相关阅读:
    1063. Set Similarity
    A1047. Student List for Course
    A1039. Course List for Student
    最大公约数、素数、分数运算、超长整数计算总结
    A1024. Palindromic Number
    A1023. Have Fun with Numbers
    A1059. Prime Factors
    A1096. Consecutive Factors
    A1078. Hashing
    A1015. Reversible Primes
  • 原文地址:https://www.cnblogs.com/l8l8/p/9379638.html
Copyright © 2011-2022 走看看