前端框架Vue3项目实战(基于Vue3实现一个小相册)

出逃日志

于 2024-11-30 16:26:57 发布

阅读量1.5k

点赞数 16

文章标签：前端框架前端 javascript

本文链接：https://blog.youkuaiyun.com/d7210/article/details/144156218

版权

下面是是对Vue3操作的一个项目实战

下面代码是html的基本骨架（没有任何的功能）：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>相册</title>

<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'

</script>

</body>

</html>

运行结果：

接下来我们将添加代码使其变成一个小相册，运行结果如下图：

我们可以点击上一张或下一张来实现图片的跳转，也可以使用按钮1234来实现你想跳转的张数

【实现思路】

1. 利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径

2. 利用v-bind绑定图片的路径，使得图片路径可以自动更新

以下是实现相册的完整代码：

（注：红色代码为上述代码的添加或修改）

<!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;

最低0.47元/天解锁文章