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

2024-08-21 20:05:22

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

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

vue实现点击图片放大效果

本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下 1.建立子组件,来实现图片方法功能: BigImg.vue <template>  <transition name="fade"> <div class="img-view" @click="bigImg">  <div class="img
Vue实现点击显示不同图片的效果

本文实例为大家分享了Vue点击显示不同图片的具体代码,供大家参考,具体内容如使用Vue中的以下知识点来显示效果 ①:v-for:循环遍历数据 ②:v-bind:class={ }:绑定样式 ③:v-on:click(简写@click):点击事件 ④:v-if:判断 <!DOCTYPE html> <html> <head> <title>点击显示相对应的图片</title> <style type="text/css"
Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo  <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button>  <div v-if="ShowHidden" @click.stop="&quo
vue+js点击箭头实现图片切换

本文实例为大家分享了vue+js点击箭头实现图片切换的具体代码,供大家参考,具体内容如下前端需求是返回的图片数据能够点击箭头切换代码如下 <div class="pubuItemsBox">  <template v-for="(orderEvent, index) in orderEventList" > <div :class="{'pubuItem':true, 'n
vueJS简单的点击显示与隐藏的效果【实现代码】

目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l
jQuery基于事件控制实现点击显示内容下拉效果

本文实例讲述了jQuery基于事件控制实现点击显示内容下拉效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
Vue实现类似Spring官网图片滑动效果方法

先来看一下Spring官网首页的一个图片滑动显示效果可以看到, 随着鼠标的滑动,绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示. 显示这样的效果其实很简单,利用固定定位保证两张图片在同一位置下, 我们可以将灰色图片当做背景层图片,然后根据获取到的实时X轴坐标, 动态改变绿色图片的宽度, 隐藏超出X轴坐标的部分, 就可以达到这样的效果, 简单来说, 这效果就是动态改变上层图片的宽度. 实现效果: 我这边选择了两张同样大小的KDA卡莎的图片, 将金色图作为背景图,暗黑图作为左侧图, 用了Vue的
js实现二级菜单点击显示当前内容效果

最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q
基于VUE选择上传图片并页面显示（图片可删除）

基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="
Vue.js实现点击左右按钮图片切换

本文实例为大家分享了Vue.js实现点击左右按钮图片切换的具体代码,供大家参考,具体内容如下关于图片切换,网上也有很多的说法,这边通过参考给出了如下所示的解决方案效果: html 通过v-for循环展示图片列表itemlist,将图片路径保存在data中的itemlist中,添加上下按钮的点击事件. <template> <div> <div class="zs-adv"> <a title="上一页&qu
vue图片加载与显示默认图片实例代码

本文实例为大家分享了vue图片加载与显示默认图片的具体代码,供大家参考,具体内容如下 HTML: <div class="content-show-img"> <div class="show-img"> <img class="default-image" :src="data.image" @load="successLoadImg" @error="errorL

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

相关推荐

随机推荐