Vue实现点击显示不同图片的效果

2019-11-19 11:03:19

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于Express框架使用POST传递Form数据

下一篇：vue+eslint+vscode配置教程