# 基础案例：tab选择卡 案例：tab选择卡  6案例: 实现步骤 1.实现静态UI效果 ●用传统的方式实现标签结构和样式 2.基于数据重构UI效果 ●将静态的结构和样式重构为基 于Vue模板语法的形式 ●处理事件绑定和js控制逻辑 3.声明式编程 ●模板的结构和最终 显示的效果基本一致  ~~~ <div id="app"> <div class="tab"> <ul> <li v-on: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"> </div> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* */ var Vm = new Vue({ el: ' #app', data: { currentIndex: 0, //选项卡当前的索引 list: [{ id: 1, title: ' apple', path:' img/apple. png },{ id: 2, title: ' orange '， path:' img/ orange . png },{ id: 3, title: ' lemon ' , path:' img/ lemon. png }] }, methods: { change: function(index){ //在这里实现选项卡切换操作:本质就是操作类名 //如何操作类名?就是通过currentIndex this . currentIndex = index; } } }); </script> ~~~