VUE v-for 循环的 2 个使用

2022 年 9 月 11 日
美国
本文字数：406 字
阅读完需：约 1 分钟

在项目中，需要使用 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>

复制代码

直接进行使用就可以了。