Vue.js怎么点击切换图片

怎么还没吃饭啊

已于 2023-12-19 21:59:37 修改

阅读量668

点赞数 7

文章标签： vue.js 前端 javascript

于 2023-12-18 22:18:34 首次发布

本文链接：https://blog.csdn.net/2201_75808710/article/details/135070026

版权

目录

我们要完成的页面及功能

一、我们先建立一个html文件

二、引入vue.js文件

1.引入

2.把要写的框架给写了

3.设计盒子的大小

4.设计默认图片选中的项

5.通过下标遍历图片

三、总结

我们要完成的页面及功能

通过点击下面的图片，切换大图片

一、我们先建立一个html文件

点击文件夹，然后创建一个新的html

这样就是创建好的状态，然后把最基本的东西给补全，打一个英语版的！回车就好了

title可以根据自己是什么网站来命名。

二、引入vue.js文件

1.引入

js里面必须要有vue.js文件，没有可以去官网下载

2.把要写的框架给写了

三个div

这就是最简单的框架了，然后就看看要呈现的效果图，一共有三个盒子，一个是用来装大图片，一个是用来遍历小图片的，一个是大大盒子用来装他们两个的，所以需要三个<div> ,给一个大大盒子一个id,下面可以el它，要记住id为#号，class为.

        <!-- 大大盒子 -->
    <div id="app">
        <!-- 大图片盒子 -->
        <div>

        </div>
        <!-- 遍历小图片盒子 -->
     <div class="box1" >
       
    </div>
    </div>

我把它分成了三个盒子，里面分别放入图片大图片盒子和小图片盒子

 <!-- 大大盒子 -->
    <div id="app">
        <!-- 大图片盒子 -->
        <div>
            <img src="" alt="">
        </div>
        <!-- 遍历小图片盒子 -->
        <div class="box1">
            <img src="" alt="">
        </div>
    </div>

3.设计盒子的大小

记得要把大盒子放大一点，免得会和小盒子一样大，会不好看

    #box {
        width: 300px;
        height: 300px;
        margin-left: 20px;
    }

    .box1 img {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-left: 20px;
        cursor: pointer;
    }

4.设计默认图片选中的项

插入图片可以是很多张，图片要是一个数组

//默认图片选中的项

images:[
    "../images/6.jpg",
    "../images/29.webp ",
    "../images/19.png",
    "../images/12.jpg "
       ]

在data里面加了一个数据用于遍历selecteImage:0，遍历小图片给他一个@click点击事件v-for遍历图片v-bind单项动态数据绑定

    <!--checked是一个点击后就会有显示颜色-->
<img :class="{'checked':selecteImage==index}" @click="selecteimage(index)" v-for="(item,index) of images":key="index" v-bind:src="item" alt="" >

css这样写

.checked{

border: 2px solid rebeccapurple;

}

checked对应的是selecteImage==index也就是下标

这样点击时就会有颜色变化，会更美观

5.通过下标遍历图片

selecteImage的初始值给了0，也就是下标为0，第一张图片，selecteImage=index

   // i为图片的下标，通过下标然后遍历图片
            methods: {
            selecteimage(i){
            this.selecteImage=i;
            this.selecteImage=this.img[i]
                }

然后图片img通过下标来遍历一定要绑定v-bind动态指令，免得点击不出来

 <!-- 大图片盒子 -->
        <div>
            <!-- 给图片绑定一个单项动态数据绑定 -->
            <img id="box" v-bind:src="images[selecteImage]" alt="">
        </div>
        <!-- 遍历小图片盒子 -->
        <div class="box1">
            <!-- 遍历小图片给他一个@click点击事件v-for遍历图片v-bind单项动态数据绑定-->
            <img :class="{'checked':selecteImage==index}" @click="selecteimage(index)" v-for="(item,index) of images":key="index" v-bind:src="item" alt="" >
        </div>

这样就成功了，点击图片，切换大图，然后就可以生成一个简单的购物图片切换了，可以应用在很多项目上，图片切换非常普遍。

这里是运行的结果视频

QQ录屏20231218221459

这是全部代码，大家可以理解一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟购物时图片切换</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    #box{
        width: 300px;
        height: 300px;
        margin-left:20px;
    }
    .box1 img{
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-left:20px;
        cursor: pointer;
    }
    .checked{
        border: 2px solid rebeccapurple;
        }
</style>
<body>
    <!-- 大大盒子 -->
    <div id="app">
        <!-- 大图片盒子 -->
        <div>
            <!-- 给图片绑定一个单项动态数据绑定 -->
            <img id="box" v-bind:src="images[selecteImage]" alt="">
        </div>
        <!-- 遍历小图片盒子 -->
        <div class="box1">
            <!-- 遍历小图片给他一个@click点击事件v-for遍历图片v-bind单项动态数据绑定-->
            <img :class="{'checked':selecteImage==index}" @click="selecteimage(index)" v-for="(item,index) of images":key="index" v-bind:src="item" alt="" >
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    images:[
                      "../images/6.jpg",
                       "../images/29.webp ",
                      "../images/19.png",
                      "../images/12.jpg "
                    ],
                    selecteImage:0
                }
            },
            // i为图片的下标，通过下标然后遍历图片
            methods: {
                selecteimage(i){
                    this.selecteImage=i;
                   this.selecteImage=this.img[i]
                }

            }
        })
    </script>
</body>
</html>

三、总结

vue.js的图片切换还是普遍使用的，所以该内容也比较重要。

怎么还没吃饭啊

关注

7
点赞
踩
10

收藏

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

这就是最简单的框架了，然后就看看要呈现的效果图，一共有三个盒子，一个是用来装大图片，一个是用来遍历小图片的，一个是大大盒子用来装他们两个的，所以需要三个在data里面加了一个数据用于遍历selecteImage:0，遍历小图片给他一个@click点击事件v-for遍历图片v-bind单项动态数据绑定。这样就是创建好的状态，然后把最基本的东西给补全，打一个英语版的！title可以根据自己是什么网站来命名。我把它分成了三个盒子，里面分别放入图片。然后图片img通过下标来遍历。
复制链接

扫一扫