Web前端vueDemo—实现图片切换功能（二）

系列文章目录

文章目录

系列文章目录
前言
一、项目分布
二、项目源码
三、运行结果

前言

vue的相关配置在系列文章的第一部分中进行了配置。
此处主要使用的标签为：

v-bind： 对标签的属性进行绑定。主要对标签中的img的src中的图片地址进行了改变。
v-on： 添加的点击事件。使用到两个方法，pre和post当产生点击事件后会对index的值进行改变。
v-show： 用于对上一张和下一张按钮的隐藏。隐藏后index的值由于无法继续点击，所以不会再发生变化。
补充： v-show和v-if的区别：
vue-show 本质： 给标签添加dispaly的标签。
v-if本质： 是直接将标签从dom树中移除，对性能消耗较大。
如果是频繁切换的元素则使用v-show，否则一般用v-if。

一、项目分布

在配置好vue的环境之后，还需导入需要切换的图片，此处的图片和编号可以是任意的。
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、项目源码

图片切换的源码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Computible" content="ie=edge">
    <title>图片切换demo</title>
</head>
<body>
    <div id="app">
        <input type="button" value="上一张" v-show="index>=1" v-on:click="pre">
        <img v-bind:src="images[index]">
        <input type="button" value="下一张"  v-show="index v-on:click="post">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                images:["img/01.jpg","img/02.jpg","img/03.jpg"],
                index:0
            },
            methods: {
                //下一张
                post:function(){
                    this.index++;
                },
                //上一张
                pre:function(){
                    this.index--;
                }
            }
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

三、运行结果

点击下一张可以进行图片的切换。
在这里插入图片描述

相关阅读:
MQ - 42 消息中台：搭建企业内部统一的消息服务
【wespeaker】模型ECAPA_TDNN介绍
mysql主从复制与读写分离
用java画一个抽奖时用的圆盘，感觉还挺好看的。
Zookeeper (四) --------- 服务器动态上下线监听案例
Vue中修改element-ui中的el-table中默认的暂无数据样式
基于C#通过PLCSIM ADV仿真软件实现与西门子1500PLC的S7通信方法演示
APP广告竞价机制：头部竞价与瀑布流
Linux比较重要命令使用总结
深度卷积神经网络是什么,卷积神经网络结构设计

原文地址：https://blog.csdn.net/weixin_45118229/article/details/125887980