相册的示例效果图
注意看注释...
CSS部分：
<style>/* 伪元素选择器，用于在具有clear_ele类的元素内部的末尾添加一个新的元素 */.clear_ele::after{ content: ""; /* 这个伪元素的内容属性必须有 *//* 块级元素，便于占据一行空间 */display: block;clear: both; /* 清除浮动 */}.box{margin-bottom: 20px;padding: 0;}.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;}</style>HTML部分：
按照示例图做出一个简单的框架。利用v-bind绑定图片的路径，使得图片路径可以自动更新。通过v-on（@）为切换相片的按钮绑定一个函数，这个函数负责更改图片路径。
<div id="app"><!-- 利用插值运算符显示img.number --> <h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2><!-- <img>标签通过v-bind绑定了图片的地址为img.url。 --> <img v-bind:src="img.url" class="img"> <ul type="none" class="clear_ele box"><!-- 列表通过v-for指令生成4个li元素，通过v-on绑定，点击button时调用jump函数，并且显示val的值 --><li v-for="(val, idx) in 4" @click="jump(val)" class="button"> {{val}} </li></ul><!-- 通过@click绑定prev和next函数，用于切换上一张和下一张图片 --><button @click="prev">上一张</button> <button @click="next">下一张</button></div>JavaScript部分（Vue相关）：
把图片路径存储在响应式数据里，当这个响应式数据改变时，html的图片路径就会自动改变。
<script type="module">// 通过import语句导入createApp, ref, reactiveimport { createApp, ref, reactive } from './vue.esm-browser.js'createApp({setup() {// 【定义数据】// 通过reactive函数创建一个响应式对象img，并设置图片的属性const img = reactive({number: 1, // 图片的序号url: "./img_src/logo1.png" // 图片的源地址})// 【定义函数】//上一张const prev = () => {img.number--// 当图片序号为0时，切换到第4张图片if (img.number == 0) {img.number = 4}img.url = `./img_src/logo${img.number}.png` } //下一张const next = () => {img.number++// 当图片序号为5时，切换到第1张图片if (img.number == 5) {img.number = 1}img.url = `./img_src/logo${img.number}.png`}//跳转//根据传入的val值跳转到相应的图片const jump = (val) => {img.number = valimg.url = `./img_src/logo${img.number}.png`}//记得每一个对象和方法都要暴露出来return {img, prev,next,jump}}}).mount("#app")</script>
