VUE v-for 循环的 2 个使用
2023-06-13 09:12:24 时间
在项目中,需要使用 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专题 01_计算属性vs监听(侦听)属性
- vue集成海康h5player实现播放
- 人类高质量vue学习笔记(五)
- vue和layUi对比
- Vue(3)webstorm代码格式规范设置与vue模板配置
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue笔记(11) vue-router
- vue组件通讯之$attrs
- vue-router+vuex的坑
- Vue生成二维码_vue通过二维码分享
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- 今天讲vue讲解专栏里的VUE组件
- Vue源码之mustache模板引擎(二)手写实现mustache
- 干货|以Vue为例,如何提升小程序开发效率?
- Vue组件设计学习笔记,持续记录
- 一个Vue表单的终极解决方案
- vue源码分析-从new Vue开始_2023-02-24
- vue入门篇之Vue.js 组件
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue应用中部署Redis(vue中使用redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)