11.[Vue入门]切换图片案例

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
</head>
<body>
<div id="mask">
    <span v-text="'共 ' + imgArr.length + ' 张图,现在第 ' + (index+1) + ' 张'"></span>
    <br/>
    <a href="javascript:void(0)" class="left" @click="prev" v-show="index!=0">👈</a>
    &nbsp;&nbsp;&nbsp;
    <a href="javascript:void(0)" class="right" @click="next" v-show="index<imgArr.length-1">👉</a>
    <br/>
    <img :src="imgArr[index]" alt="">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#mask',
        data: {
            imgArr: [
                'https://imgsa.baidu.com/forum/w%3D580/sign=f93f022ad562853592e0d229a0ee76f2/bdcb5cfbb2fb43160f4d02a220a4462308f7d33a.jpg',
                'https://imgsa.baidu.com/forum/w%3D580/sign=23917b3bd539b6004dce0fbfd9513526/b9b4ba1bb051f819b0477b92dab44aed2f73e72a.jpg',
                'https://imgsa.baidu.com/forum/w%3D580/sign=c46fc1bc94eef01f4d1418cdd0fc99e0/fb6d0346f21fbe091b83bbcc6b600c338544adab.jpg',
                'https://imgsa.baidu.com/forum/w%3D580/sign=6b03a52cb74543a9f51bfac42e168a7b/00ac10d8bc3eb135ebe0cc63a61ea8d3fc1f446d.jpg',
                'https://imgsa.baidu.com/forum/w%3D580/sign=0fb4686fe950352ab16125006342fb1a/06be3f7adab44aed1b34d93cb31c8701a08bfb12.jpg'
            ],
            index: 0,
            active: true
        },
        methods: {
            prev: function () {
                this.index--;
            },
            next: function () {
                this.index++;
            }
        }
    })
</script>
</body>
</html>
迹路文库 > Vue
#Vue
11.[Vue入门]切换图片案例
https://元气码农少女酱.我爱你/af332d7bc3e4/
作者
元气码农少女酱
发布于
2023年5月28日
许可协议