这篇文章主要介绍如何使用Vue实现点击显示不同图片的效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
南安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
使用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>
以上是“如何使用Vue实现点击显示不同图片的效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站栏目:如何使用Vue实现点击显示不同图片的效果
本文网址:https://www.cdcxhl.com/article16/jocdgg.html
成都网站建设公司_创新互联,为您提供网站设计公司、关键词优化、网站营销、品牌网站建设、App开发、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联