Vue实现点击显示不同图片的效果
本文实例为大家分享了Vue点击显示不同图片的具体代码,供大家参考,具体内容如
使用Vue中的以下知识点来显示效果
①:v-for:循环遍历数据
②:v-bind:class={}:绑定样式
③:v-on:click(简写@click):点击事件
④:v-if:判断
点击显示相对应的图片 *{ margin:0; padding:0; list-style:none; } .myul{ display:flex; } .myulli{ border:1pxsolidorange; height:150px; width:150px; flex-direction:row; text-align:center; line-height:150px; } .content{ border:1pxsolidgrey; height:350px; width:600px; } .contentimg{ height:350px; width:600px; } .active{ background:#3A9ffb; color:white; } {{item.content}}