Vue项目练习之简单的小相册
使用前面学过的vue3框架的知识来制作一个简单的相册
知识点：https://blog.csdn.net/DZ_OP/article/details/144009207?spm=1001.2014.3001.5501
首先我们来看一下完整的代码，通过剖析这些代码一步步学会如何运用所学知识
注意：四张图片的路径为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
.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>
</head>
<body>
<div id="app">
<h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2>
<img v-bind:src="img.url" class="img">
<ul type="none" class="clear_ele box">
<li v-for="(val, idx) in 4" @click="jump(val)" class="button"> {{val}} </li>
</ul>
<button @click="prev">上一张</button> <button @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--
if (img.number == 0) {
img.number = 4
}
img.url = `./img_src/logo${img.number}.png`
}
//下一张
const next = () => {
img.number++
if (img.number == 5) {
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>示例效果：
首先我们需要写好一个基本的html框架，css里必须写进防止高度塌陷的代码，才不会导致块与块之间展现出”丑陋“的样子。
<style>
.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>接着vue框架部分，我们需要先导入模块
import { createApp, ref, reactive } from './vue.esm-browser.js'使用响应式数据reactive来定义数据
const img = reactive(
{
number: 1,
url: "./img_src/logo1.png"
}
)
通过v-bind来绑定数据，使得”上一张“按钮做出了事件行为（里面写了一个if函数来实现图片路径的自减）
<button @click="prev">上一张</button>
const prev = () => {
img.number--
if (img.number == 0) {
img.number = 4
}
img.url = `./img_src/logo${img.number}.png`
} 同样的做法，为”下一张“按钮做出用样的操作（会做一个按钮就会做第二个第n个按钮）
<button @click="next">下一张</button>
const next = () => {
img.number++
if (img.number == 5) {
img.number = 1
}
img.url = `./img_src/logo${img.number}.png`
}
接着我们需要使用反引号来实现控制这个字符，v-for做一个遍历来实现跳转功能
const jump = (val) => {
img.number = val
img.url = `./img_src/logo${img.number}.png`
} <ul type="none" class="clear_ele box">
<li v-for="(val, idx) in 4" @click="jump(val)" class="button"> {{val}} </li>
</ul>最后将其暴露出来
return {img, prev,next,jump}这样我们一个简单的相册就制作完成了