【Vue3入门2】01-图片轮播示例

本文介绍vue3的图片轮播案例。

代码如图所示：

实现具体步骤已标注，共19步

实现效果放在最后

<body>
    <div id="app">
        <h3>{{ number }}</h3>
        <!-- 1.这里的src中的1.webp是固定的 -->
        <!-- <img src="./images/1.webp" style="width: 300px;"> -->

        <!-- 2.要将其变为变量 首先将src变为动态属性 v-bind:或者:，并且将1.webp改为模板字符串-->
        <img :src=`./images/${number}.webp` style="width: 300px;">

        <!-- 4.定义button按钮并绑定事件next，转到步骤5写next方法 -->
        <button @click="next">下一张</button>
        <!-- 9.设置上一张功能，转到步骤10写prev方法 -->
        <button @click="prev">上一张</button>
        <hr>

        <!-- 13.接下来实现指定图片跳转 -->
        <ul>
            <!-- 
                14.v-for实现循环遍历 v-for:"value in X" 
                将所有图片的索引列出，然后转到步骤16实现跳转功能
            -->
            <li v-for="value in 10">
                <!-- 15.定义a标签显示图片数字索引 -->
                <!-- 16.给标签设置：点击跳转功能，转到17编写jump(value)方法 -->
                <a href="#" @click="jump(value)">{{ value }}</a>
            </li>
        </ul>
    </div>
    <script type="module">
        // 模块化开发
        import { createApp, ref } from './vue.esm-browser.js'
        createApp({
            setup() {
                // ref创建响应式数据number
                // 3.要想实现页面切换则可以对number进行操作
                const number = ref(2)

                // 5.next方法
                const next = () => {
                    // 点击按钮后调用该方法实现图片标码数字的切换，切换下一张
                    // 数值的变化 用 XX.value
                    number.value++

                    // 7.但是图片有限 超过图片数量无法显示 现在对图片数量进行限制
                    // 8.在最后一张时点击下一张切换到第一张图片
                    if(number.value === 11){
                        // 给number.value重新赋值
                        number.value = 1
                    }
                }

                // 10.prev方法实现切换到上一张
                const prev = () => {
                    // 点击按钮后调用该方法实现图片标码数字的切换，切换下一张
                    // 数值的变化 用 XX.value
                    number.value--
                    // 11.在第一张时点击上一张切换到最后一张图片
                    if(number.value === 0){
                        // 给number.value重新赋值
                        number.value = 10
                    }
                }

                // 17.jump(value)跳转方法
                const jump = (value) => {
                    // 18.将点击的数字(即value)传入给jump方法，将这个value值赋值给number，实现跳转
                    number.value = value;
                }

                return {
                    number,
                    // 6.将next方法返回
                    next,
                    // 12.返回prev
                    prev,
                    // 19.返回jump
                    jump
                }
            }
        }).mount("#app")
    </script>
</body>

本文介绍vue3的图片轮播案例。