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的环境之后，还需导入需要切换的图片，此处的图片和编号可以是任意的。

二、项目源码

图片切换的源码如下：

<!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<images.length-1" 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>

三、运行结果

点击下一张可以进行图片的切换。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45118229/article/details/125887980
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2023-01-02 21:26:26
阅读 ( 137 )
分类：前端

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

系列文章目录

文章目录

前言

一、项目分布

二、项目源码

三、运行结果

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看