✍ 如何做成**⇩这种效果呢🤔？**
㊀首先😐
没有任何装饰的源代码：
javascript
<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>++【实现思路】😍++
-
利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径
-
利用v-bind绑定图片的路径，使得图片路径可以自动更新
javascript
<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>㊁ 定义数据😉：
javascript
const img = reactive(
{
number: 1,
url: "./img_src/logo1.png"
}
)㊂ 定义函数😊：
javascript
//控制上一张
const prev = () => {
img.number=img.number-1
if (img.number == 0) {
img.number = 8
}
img.url = `./img_src/logo${img.number}.png`
}
//控制下一张
const next = () => {
img.number=img.number+1
if (img.number > 8) {
img.number = 1
}
img.url = `./img_src/logo${img.number}.png`
}🚨注：改变照片的路径，实现照片的转换
img.url = `./img_src/logo${img.number}.png`
㊃ 实现照片跳转并返回函数😮：
javascript
const jump = (val) => {
img.number = val
img.url = `./img_src/logo${img.number}.png`
}
return {img, prev,next,jump}
}
}).mount("#app")
</script>🚨注：一定要记得返回函数哦负责将无法显示
😇完整代码**⇩**：
javascript
<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-1
if (img.number == 0) {
img.number = 8
}
img.url = `./img_src/logo${img.number}.png`
}
//下一张
const next = () => {
img.number=img.number+1
if (img.number > 8) {
img.number = 1
}
img.url = `./img_src/logo${img.number}.png`
}
//跳转
const jump = (val) => {
img.number = val
img.url = `./img_src/logo${img.number}.png`
}
return {img, prev,next,jump}
}
}).mount("#app")
</script>
</body>
</html>