本文介绍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的图片轮播案例。