基于Vue3實現(xiàn)一個小相冊詳解
更新時間：2024年12月02日 09:16:39 作者：出逃日志
這篇文章主要為大家詳細介紹了如何基于Vue3實現(xiàn)一個小相冊效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
下面是是對Vue3操作的一個項目實戰(zhàn)
下面代碼是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實現(xiàn)的相冊：展示第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>運行結(jié)果：
接下來我們將添加代碼使其變成一個小相冊，運行結(jié)果如下圖：
我們可以點擊上一張或下一張來實現(xiàn)圖片的跳轉(zhuǎn)，也可以使用按鈕1234來實現(xiàn)你想跳轉(zhuǎn)的張數(shù)
【實現(xiàn)思路】
1. 利用v-on為切換相片的按鈕綁定上一個函數(shù)，這個函數(shù)負責更改圖片路徑
2. 利用v-bind綁定圖片的路徑，使得圖片路徑可以自動更新
以下是實現(xiàn)相冊的完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相冊</title>
<style>
.clear_ele::after{
content: ""; /* 這個偽元素的內(nèi)容屬性必須有 */
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實現(xiàn)的相冊：展示第{{ 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() {
// 【定義數(shù)據(jù)】
const img = reactive(
{
number: 1,
url: "./img_src/logo1.png"
}
)
// 【定義函數(shù)】
//上一張
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`
}
//跳轉(zhuǎn)
const jump = (val) => {
img.number = val
img.url = `./img_src/logo${img.number}.png`
}
return {img, prev,next,jump}
}
}).mount("#app")
</script>
</body>
</html>還有另一種方法也同樣可以實現(xiàn)相冊的效果，代碼如下：
下述代碼的弊端就是比較冗長，相對于上一種方法會消耗更長時間，因為它是把每一張照片的使用結(jié)果一一敲出來的，可與上面代碼比對
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相冊</title>
<style>
.clear_ele::after{
content: ""; /* 這個偽元素的內(nèi)容屬性必須有 */
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實現(xiàn)的相冊：展示第{{img.index}}張相片</h2>
<img v-bind:src= "img.url" class="img" alt="圖片加載失敗">
<ul type="none" class="box clear_ele">
<li class="button" v-on:click = "show_1_img">1</li>
<li class="button" v-on:click = "show_2_img">2</li>
<li class="button" v-on:click = "show_3_img">3</li>
<li class="button" v-on:click = "show_4_img">4</li>
</ul>
<button v-on:click = "pre">上一張</button>
<button v-on:click = "next">下一張</button>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const img = reactive(
{
index: 1,
url: "./img_src/logo1.png", //圖片路徑
}
)
const show_1_img = () => {
img.index = 1
img.url = `./img_src/logo${img.index}.png`
console.log(`用戶點擊第${img.index}張按鈕，顯示第${img.index}張照片`);
}
const show_2_img = () => {
img.index = 2
img.url = `./img_src/logo${img.index}.png`
console.log(`用戶點擊第${img.index}張按鈕，顯示第${img.index}張照片`);
}
const show_3_img = () => {
img.index = 3
img.url = `./img_src/logo${img.index}.png`
console.log(`用戶點擊第${img.index}張按鈕，顯示第${img.index}張照片`);
}
const show_4_img = () => {
img.index = 4
img.url = `./img_src/logo${img.index}.png`
console.log(`用戶點擊第${img.index}張按鈕，顯示第${img.index}張照片`);
}
const pre = () => {
img.index = img.index - 1
if(img.index < 1 ){
img.index = 4
}
// 把圖片路徑存儲在響應式數(shù)據(jù)里，當這個響應式數(shù)據(jù)改變時，html的圖片路徑就會自動改變
img.url = `./img_src/logo${img.index}.png`
console.log(`用戶點擊了上一張按鈕，顯示第${img.index}張照片`);
}
const next = () => {
img.index = img.index + 1
if(img.index > 4 ){ // 圖片展示完了，回到第一張
img.index = 1
}
// 把圖片路徑存儲在響應式數(shù)據(jù)里，當這個響應式數(shù)據(jù)改變時，html的圖片路徑就會自動改變
img.url = `./img_src/logo${img.index}.png`
console.log(`用戶點擊了下一張按鈕，顯示第${img.index}張照片`);
}
return { img,
show_1_img,
show_2_img,
show_3_img,
show_4_img,
pre, next } //把數(shù)據(jù)（屬性）， 函數(shù)（方法）暴露出來，供HTML模板調(diào)用
}
}).mount("#app")
</script>
</body>
</html>到此這篇關(guān)于基于Vue3實現(xiàn)一個小相冊詳解的文章就介紹到這了,更多相關(guān)Vue3相冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學習如何將pinia運用到項目實戰(zhàn)中去,文中有詳細的安裝教程和使用方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue父子組件slot插槽的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Nginx是一款輕量級的Web服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項目的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了關(guān)于vant折疊面板默認展開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
ElementPlus?Table表格實現(xiàn)可編輯單元格
本文主要介紹了ElementPlus?Table表格實現(xiàn)可編輯單元格,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
生成二維碼是一種常見的需求,無論是用于商業(yè)宣傳還是個人分享,二維碼都可以提供快速方便的方式來傳遞信息,在Vue框架中,我們可以使用qrcode庫來輕松地生成二維碼,本篇博文將介紹如何安裝qrcode庫,并通過一個實際例子來展示如何生成二維碼,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了Vue折疊面板組件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了Vue之表單事件的數(shù)據(jù)綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細介紹了如何使用Vue快速實現(xiàn)一個無縫輪播效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)zip文件下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08