✍ 如何做成⇩这种效果呢🤔？
㊀首先😐
没有任何装饰的源代码：
<style>.box{margin-bottom: 20px;padding: 0;}.img{width: 480px; height: 240px;border: 1px bisque solid;}</style>
</head><body><div id="app"><h2>基于Vue3实现的相册：展示第xx张相片</h2><img src = "./img_src/logo1.png" class="img" alt="图片加载失败"> <ul type="none" class="box"></ul><button>上一张</button> <button>下一张</button></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'// 【实现思路】// 1. 利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径// 2. 利用v-bind绑定图片的路径，使得图片路径可以自动更新</script>
</body></html>【实现思路】😍
1. 利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径
2. 利用v-bind绑定图片的路径，使得图片路径可以自动更新
<div id="app"><h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2><img v-bind:src="img.url" class="img"> <br><button v-on:click="prev">上一张</button> <button v-on:click="next">下一张</button></div>㊁ 定义数据😉：
const img = reactive({number: 1,url: "./img_src/logo1.png"})
㊂ 定义函数😊：
//控制上一张const prev = () => {img.number=img.number-1if (img.number == 0) {img.number = 8}img.url = `./img_src/logo${img.number}.png` } //控制下一张const next = () => {img.number=img.number+1if (img.number > 8) {img.number = 1}img.url = `./img_src/logo${img.number}.png`}🚨注：改变照片的路径，实现照片的转换
img.url = `./img_src/logo${img.number}.png`
㊃ 实现照片跳转并返回函数😮：
const jump = (val) => {img.number = valimg.url = `./img_src/logo${img.number}.png`}return {img, prev,next,jump}}}).mount("#app")</script>🚨注：一定要记得返回函数哦负责将无法显示
😇完整代码⇩：
<title>相册-参考实现</title><style>.clear_ele::after{content: ""; /* 这个伪元素的内容属性必须有 */display: block;clear: both;}.button{background-color: bisque;width: 20px;float: left; text-align: center;margin-right: 10px;border-radius: 8px;cursor: pointer; }.img{width: 480px; height: 240px;border: 1px bisque solid;}.box{margin-bottom: 20px;padding: 0;}</style>
</head><body><div id="app"><h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2><img v-bind:src="img.url" class="img"> <br><button v-on:click="prev">上一张</button> <button v-on:click="next">下一张</button></div><script type="module">import { createApp, ref, reactive } from './vue.esm-browser.js'createApp({setup() {// 【定义数据】const img = reactive({number: 1,url: "./img_src/logo1.png"})// 【定义函数】//上一张const prev = () => {img.number=img.number-1if (img.number == 0) {img.number = 8}img.url = `./img_src/logo${img.number}.png` } //下一张const next = () => {img.number=img.number+1if (img.number > 8) {img.number = 1}img.url = `./img_src/logo${img.number}.png`}//跳转const jump = (val) => {img.number = valimg.url = `./img_src/logo${img.number}.png`}return {img, prev,next,jump}}}).mount("#app")</script>
</body></html>