使用Vue中的以下知识点来显示效果
①：v-for：循环遍历数据
②：v-bind:class={ }：绑定样式
③：v-on:click（简写@click）：点击事件
④：v-if：判断
<!DOCTYPE html> <html> <head> <title>点击显示相对应的图片</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .myul{ display: flex; } .myul li{ border: 1px solid orange; height: 150px; width: 150px; flex-direction: row; text-align: center; line-height: 150px; } .content{ border: 1px solid grey; height: 350px; width: 600px; } .content img{ height: 350px; width: 600px; } .active{ background: #3A9ffb; color: white; } </style> </head> <body> <div> <div> <ul> <li v-for="(item,index) in mess" v-bind:class="{ 'active': status === index}" v-on:click="changeImg(index)"> {{item.content}} </li> </ul> </div> <div> <img src="https://www.jb51.net/img/1.jpg" v-if="status === 0"> <img src="https://www.jb51.net/img/2.jpg" v-if="status === 1"> <img src="https://www.jb51.net/img/84.jpg" v-if="status === 2"> <img src="https://www.jb51.net/img/85.jpg" v-if="status === 3"> </div> </div> </body> </html> <script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script> <script type="text/javascript"> new Vue({ el:".app", data:{ status:0, //状态显示 mess:[ {id:0,content:"点击显示图片一"}, {id:1,content:"点击显示图片二"}, {id:2,content:"点击显示图片三"}, {id:3,content:"点击显示图片四"} ] }, methods:{ changeImg:function(index){ this.status=index; } } }) </script>