VUE v-for 循环的 2 个使用
2023-09-27 14:20:30 时间
在项目中,需要使用 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>
直接进行使用就可以了。
根据项目中需求,直接进行按照需要进行编码就可以了。
https://www.ossez.com/t/vue-v-for-2/14093
相关文章
- 微信小程序校园生活小助手+后台管理系统|前后分离VUE
- 精品微信小程序ssm的童装购买购物商城平台网站+后台|前后分离vue
- Vue学习笔记之scope.row的最简单理解
- 搭建 vue-admin-template 后台框架
- angular.js和vue.js中实现函数去抖(debounce)
- [vuejs短文]使用vue-transition制作小小轮播图
- vue系列:重置data中的值
- Vue面试高频考题解析
- vue 原理简单实现
- vue——qiankun环境,vue-cli3子项目本地启动,element无法显示字体和图标,控制台提示:Failed to decode downloaded font: http://localhost:9000/child/xxx-front/font...
- js 引入Vue.js实现vue效果
- Vue从入门到精通——第三章 使用 Vue 脚手架(下)
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航