VUE v-for 循环的 2 个使用

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

直接进行使用就可以了。

根据项目中需求，直接进行按照需要进行编码就可以了。

VUE v-for 循环的 2 个使用 - 前端 - OSSEZ在项目中，需要使用 VUE 的 v-for 循环对列表进行输出。 直接在标签中使用。 <li v-for="data in totalPages" :key="data"> <a class="page-link" href="javascript: void(0);" @click="pageSearch(data )">{{data}}</a> …https://www.ossez.com/t/vue-v-for-2/14093