<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab { width: 500px; height: 500px; } img { width: 100px; height: 50px; display: none; } .tab img { /* display: none; */ } .tab div { /* display: none; */ } .tab .current img { display: block; } .active { background-color: orange; } </style> </head> <body> <div id="app"> <div class="tab"> <!-- <ul> <li class="active">apple</li> <li>orange</li> <li>lemon</li> </ul> --> <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> <div :class='currentIndex==index?"current":""' :key=' item.id ' v-for='(item,index) in list '> <img :src="item.path"> </div> <!-- <div class="current"> <img src="./img/1.png" alt=""> </div> <div> <img src="./img/2.png" alt=""> </div> <div> <img src="./img/3.png" alt=""> </div> --> </div> </ul> </div> </div> <script type="text/javascript" src="./js/vue.js"></script> <script> var vm = new Vue({ //绑定的标签 el: '#app ', //自定义按键修饰符 data: { currentIndex: 0, //选项卡的索引 list: [{ id: 1, title: 'apple ', path: './img/1.png ' }, { id: 2, title: 'orange ', path: './img/2.png ' }, { id: 3, title: 'lemon ', path: './img/3.png ' }] }, methods: { change: function(index) { //切换效果 this.currentIndex = index; } } }); </script> </body> </html>
