vue.js 点击切换图片

kktzj

于 2023-12-20 21:50:01 发布

阅读量1.1k

点赞数 22

文章标签： vue.js flutter 前端

本文链接：https://blog.csdn.net/kktzj/article/details/135118311

版权

在Vue.js中实现点击小图切换大图的功能可以通过以下步骤实现：

方法一：

1. 在Vue组件的data属性中定义一个变量来存储当前展示的大图的地址字符串和一个数组来存储小图的地址字符串。还需要定义一个变量来存储当前展示的小图的索引值。

```javascript
data() {
return {
currentBigImage: "",
smallImages: [
"small1.jpg",
"small2.jpg",
"small3.jpg",
"small4.jpg",
"small5.jpg"
],
currentSmallImageIndex: 0,
descriptions: [
"小图1的介绍",
"小图2的介绍",
"小图3的介绍",
"小图4的介绍",
"小图5的介绍"
]
};
}
```

2. 在Vue模板中使用图片元素和对应的介绍元素来展示当前的大图和介绍，同时使用v-for指令遍历小图数组来展示小图。

```html
<template>
<div class="container">
<div class="big-image">
<img :src="currentBigImage" alt="Current Big Image" />
<p>{{ descriptions[currentSmallImageIndex] }}</p>
</div>
<div class="small-images">
<div
v-for="(image, index) in smallImages"
:key="index"
class="small-image"
:class="{ active: currentSmallImageIndex === index }"
@click="changeBigImage(index)"
>
<img :src="image" alt="Small Image" />
</div>
</div>
</div>
</template>
```

3. 在Vue组件的methods中定义一个方法来处理点击小图切换大图的逻辑。在该方法中更新当前展示小图的索引值并更新当前展示的大图的地址字符串。

```javascript
methods: {
changeBigImage(index) {
this.currentSmallImageIndex = index;
this.currentBigImage = this.smallImages[this.currentSmallImageIndex];
}
}
```

这样，当用户点击任意一个小图时，会触发changeBigImage方法来更新currentSmallImageIndex和currentBigImage值，从而实现大图和介绍的切换和更新。

请注意，上述示例中使用了一个简单的数组来存储大图和小图以及对应的介绍数据。你可以根据实际情况自定义数据结构或从API中获取数据来动态展示图片和介绍。另外，也可以添加其他的交互效果和样式来美化界面。

方法二：代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.imgBox{

display: flex;

}

.imgBox img{

width: 150px;

height: 150px;

margin: 10px;

}

.imgBox div{

margin: 5px;

}

.borderShow{

border: 2px solid red;

}

.show img{

margin-bottom: 10px;

height: 500px;

width: 500px;

}

</style>

</head>

<body>

</div>

</div>

new Vue({

el: "#app",

data() {

return {img: ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg", "../img/4.jpg"],

show:"../img/2.jpg",

num: 0

}

methods:{

onImg(e){

this.show = this.img[e];

this.num = e

}

})

</script>

</body>

<html>

效果如下：

当点击下图时，大图照也随之更换

kktzj

关注

22
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
vue.js 点击切换图片

这样，当用户点击任意一个小图时，会触发changeBigImage方法来更新currentSmallImageIndex和currentBigImage值，从而实现大图和介绍的切换和更新。1. 在Vue组件的data属性中定义一个变量来存储当前展示的大图的地址字符串和一个数组来存储小图的地址字符串。在该方法中更新当前展示小图的索引值并更新当前展示的大图的地址字符串。2. 在Vue模板中使用图片元素和对应的介绍元素来展示当前的大图和介绍，同时使用v-for指令遍历小图数组来展示小图。
复制链接

扫一扫