您现在的位置是:首页 > Javascript
当前栏目
Vue指令之列表渲染
2023-03-07 09:43:50 时间
1. v-for 指令简介
- v-for 指令基于一个数组来渲染一个列表。
- v-for 指令需要使用
item in/of items
形式的语法 - 其中 items 是源数据数组,item 是被迭代的数组元素别名
- 支持多种数据格式:
Array | Object | number | string | lterable(2.6新增)
2. v-for 指令使用示例
<li v-for="value in users">{{ value }}</li>
<li v-for="value,index in users">{{ index }} => {{ value }}</li>
<li v-for="(value,index) in users">{{ index }} => {{ value }}</li>
3. v-for 指令的各种数据格式场景
(1)、Array
<p v-for="v,k in user">{{ k }} => {{ v }}</p>
<p v-for="v,k in members">{{ v.name }} {{ v.age }}</p>
data: {
user: ['html', 'css', 'javascript'],
members:[
{
name: '张三',
age: 20,
},
{
name: '李四',
age: 25,
},
]
}
(2)、Object
<p v-for="(v, k) in art">{{ k }} {{ v }}</p>
data: {
art: {
title: '标题',
content: '内容'
},
}
(3)、Number
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?