实例1-图片切换

最新推荐文章于 2024-11-13 17:58:22 发布

pppggg30k

最新推荐文章于 2024-11-13 17:58:22 发布

阅读量148

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/ggg21534/article/details/136404468

版权

这篇文章介绍了如何使用HTML、CSS和Vue.js构建一个简单的图片轮播组件，通过数组存储图片URL，利用v-show指令实现上一页和下一页按钮的动态显示与隐藏，适合初学者学习前端开发中的数据驱动视图技术。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 500px;
            height: 500px;
        }

        #app .img {
            width: 100%;
            height: 80%;
        }

        #app .img img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="img">
            <img :src="imgUrls[index]" alt="">
        </div>
        <button @click="index--" v-show="index > 0">上一页</button>
        <button @click="index++" v-show="index < imgUrls.length - 1">下一页</button>
    </div>

    <!-- 引入的是开发版本包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>
        const app = new Vue({
            // 通过el配置选择器，指定vue管理的是哪个盒子
            el: '#app',
            // 通过data提供数据
            data: {
                imgUrls: [
                    './images/wt.jpg',
                    './images/xz',
                    './images/xzb',
                    './images/hz',
                    './images/hzb'
                ],
                index: 0
            }
        })
    </script>
</body>

</html>

将所有图片封装近数组内，切换图片时只需切换数组下标。

在下标为零和下表为数组的最后一位时隐藏一个按钮，用到v-show（频繁切换）。