本文實例為大家分享了Vue點擊顯示不同圖片的具體代碼，供大家參考，具體內容如
使用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 class="app"> <div class="title"> <ul class="myul"> <li v-for="(item,index) in mess" v-bind:class="{ 'active': status === index}" v-on:click="changeImg(index)"> {{item.content}} </li> </ul> </div> <div class="content"> <img src="img/1.jpg" v-if="status === 0"> <img src="img/2.jpg" v-if="status === 1"> <img src="img/84.jpg" v-if="status === 2"> <img src="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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
