案例：tab选项卡

基于数据重构UI效果

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

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

声明式编程

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

// css


// template模版

    

        
v-for="(item,index) in list">{{ item.title }}
    
    
for="(item,index) in list">
        
    


// 业务逻辑
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;
    }
}