VUE v-for 循环的 2 个使用

原创

HoneyMoose

发布于 2022-09-11 19:38:55

51900

代码可运行

文章被收录于专栏：CWIKIUSCWIKIUS

运行总次数：0

代码可运行

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

直接进行使用就可以了。