189 8069 5689

如何使用Vue实现点击显示不同图片的效果-创新互联

这篇文章主要介绍如何使用Vue实现点击显示不同图片的效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站设计制作、成都网站设计、相城网络推广、小程序设计、相城网络营销、相城企业策划、相城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联公司为所有大学生创业者提供相城建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

使用Vue中的以下知识点来显示效果

①:v-for:循环遍历数据
②:v-bind:class={ }:绑定样式
③:v-on:click(简写@click):点击事件
④:v-if:判断




 点击显示相对应的图片
 
 *{
 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;
 }
 


 
 
 
 
  {{item.content}}
 
 
 
           
 
 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;  }  }  })

以上是“如何使用Vue实现点击显示不同图片的效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:如何使用Vue实现点击显示不同图片的效果-创新互联
文章URL:http://jkwzsj.com/article/degpoo.html