我正在練習vue，我試圖用Rick Morty Api建立一個分頁，https://rickandmortyapi.com/documentation/
目前的情況是：
我想在這個表格中顯示這些按鈕 1 2 3 4 5 ... 20 如果我點擊20，那么它將看起來像 1 ... 15 16 17 18 19 20。我怎樣才能實作這一點？我需要用css來實作，還是用純js并使用計算屬性？
<div class="button_container"> /span>
< button @click="pageChange(i 1)" v-for="( item, i) in pages" : key="i"/span>>
{{ i 1 }}
</button>
</div>/span>
uj5u.com熱心網友回復：
在一個單行代碼中做到這一點并不那么簡單，我推薦的方法是使用一個computed
你可以使用https://stackoverflow.com/a/67658442/197546
中的函式。//定義方法。
function paginate(current_page, last_page, onSides = 3) {
//pages
let pages = [];
//Loop through
for (let i = 1; i <= last_page; i ) {
//定義偏移量
let offset = (i == 1| last_page) ? onSides 1 : onSides;
//如果添加了
if (i == 1 || (current_page - offset <= i & & current_page offset >= i) ||
i == current_page || i == last_page) {
pages.push（i）。
} else if (i == current_page - ( offset 1) || i == current_page ( offset 1) {
pages.push(' ...')。
}
}
return pages;
}
//>然后在組件中...。
data:{
return{
pages:[...],
currentPage: 0,
}
},
//.../span>
computed: {
pageNums = () {
return paginate（this. currentPage, this.pages.length, 4)
}
然后，因為...不應該有一個事件監聽器，你可以使用<template>和v-if來使用不同的元素
<div class="button_container"> /span>
<template v-for="pageNum in pages"/span> : key="i"/span>>
<button v-if="Number. isInteger(pageNum)" @click="currentPage = i">
{{pageNum }}}
</button> {{ pageNum }}。
<span v-else>/span>
{{pageNum }}}
</span> {{ pageNum }}.
</template >
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/310008.html
標籤：