<!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> img { width: 100px; height: 50px; } img { display: none; } .current { display: block; } .tab div { display: none; } .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 :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div> <li :key='item.id' v-for='(item,index) in list'>{{item.path}}</li> <!-- <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: { 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: { } }); </script> </body> </html>
