zoukankan      html  css  js  c++  java
  • Vuejs选项卡案例

    css

    .active {
    color: red;
    border-bottom: 1px solid red;
    }
    ul li {
    padding: 0 15px;
    float: left;
    list-style: none;
    }

    html

    <div id="root">
    <ul>
    <li @click="toggle(index,tab.view)" v-for="(tab,index) in tabs" :class="{active: active == index}" :key='index'>{{ tab.type }}</li>
    </ul>
    <br>
    <component :is="currentView"></component>

    </div>

    js

    Vue.component("child1", {
    template: '<p>hell child1</p>'
    })
    Vue.component("child2", {
    template: '<p>hell child2</p>'
    })
    new Vue({
    el: '#root',
    data: {
    currentView: 'child1',
    active: 0,
    tabs: [{
    type: 'child1 tab',
    view: 'child1'
    }, {
    type: 'child2 tab',
    view: 'child2'
    }]
    },
    methods: {
    toggle(i, v) {
    this.active = i;
    this.currentView = v
    }
    }
    })

    不忘初心,方得始终,初心易得,始终难守。
  • 相关阅读:
    getComputedStyle方法获取元素CSS值
    js获得当前元素的样式
    移动端 Retina屏border实现0.5px
    CFA
    LCD驱动
    EPD的驱动
    camera原理
    Perl实战(一)
    Perl的debug小技巧
    Bus memory attribute
  • 原文地址:https://www.cnblogs.com/chuxinsyn/p/7977432.html
Copyright © 2011-2022 走看看