案例：tab选项卡

基于数据重构UI效果

1、将静态的结构和样式重构为基于VUE模版语法的形式

2、处理时间绑定和js控制逻辑

声明式编程

模版的结构和最终显示的效果最终一致

// css
<style>
    .tab ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .tab ul li {
        box-sizing: border-box;
        padding: 0;
        float: left;
        width: 100px;
        height: 45px;
        line-height: 45px;
        list-style: none;
        text-align: center;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        cursor: pointer;
    }

    .tab ul li.active {
        background-color: orange;
    }

    .tab div {
        width: 500px;
        height: 300px;
        display: none;
        text-align: center;
        font-size: 30px;
        line-height: 300px;
        border: 1px solid #ccc;
        border-top: 0px;
    }

    .tab div.current {
        display: block;
    }

    .tab div img {
        width: 500px;
        height: 300px;
    }
</style>

// template模版
<div class="tab">
    <ul>
        <li @click="change(index)" :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list">{{ item.title }}</li>
    </ul>
    <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list">
        <img :src="item.path" alt="" class="src">
    </div>
</div>

// 业务逻辑
data: {
    currentIndex: 0, // 选项卡当前索引
    list: [{
        id: 0,
        title: 'photo1',
        path: 'img/image1.JPG',
    }, {
        id: 1,
        title: 'photo2',
        path: 'img/image2.JPG',
    }, {
        id: 2,
        title: 'photo3',
        path: 'img/image3.JPG',
    }],
},
methods: {
    change: function (index) {
    // 选项卡切换，本质切换类名
    // 如何操作类名？就是通过currentIndex
        this.currentIndex = index;
    }
}