在项目中,需要使用 VUE 的 v-for 循环对列表进行输出。
直接在标签中使用。
<li v-for="data in totalPages" :key="data">
<a class="page-link" href="javascript: void(0);" @click="pageSearch(data )">{{data}}</a>
</li>
上面的代码是直接在标签中输出。
根据 totalPages 中的数据大小循环 1 次输出 li 标签。
使用 template
因有时候我们可能还需要对标签进行操作和控制。
如果直接在标签中输出的话,不好对标签进行控制。
因此我们还可以使用 template。
代码如下:
<template v-for="pageNumber in totalPages" :key="pageNumber">
<li class="page-item active">
<a class="page-link" href="javascript: void(0);" @click="pageSearch(pageNumber)">{{ pageNumber }}</a>
</li>
</template>
直接进行使用就可以了。
根据项目中需求,直接进行按照需要进行编码就可以了。