Vue图片切换案例

最新推荐文章于 2024-05-20 13:53:01 发布

unravel_sky

最新推荐文章于 2024-05-20 13:53:01 发布

阅读量505

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/unravel_sky/article/details/136029621

版权

本文介绍了如何使用Vue.js结合JavaScript和数组，通过v-bind动态控制HTML中的图片显示，实现在按钮点击事件中切换图片地址的功能。

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

1.用数组存放图片地址

2.v-bind动态设置显示在页面上的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一张</button>
        <div>
            <img :src="list[index]" alt="">
        </div>
        <button v-show="index < list.length-1" @click="index++">下一张</button>
    </div>

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

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // 数组下标index，默认值为0
                index: 0,
                list:[
                    './imgs/a.jpg',
                    './imgs/b.jpg',
                    './imgs/c.jpg',
                    './imgs/d.jpg'
                ]
            }
        })
    </script>
</body>
</html>