vue指令 v-for循环渲染列表

v-for指令 内部也是一个表达式 用法比较灵活 看下面示例
循环输出1-10


image.png

运行结果


image.png

循环一个字符串
image.png

运行结果
image.png

v-for内部是一个函数


image.png

image.png

运行结果
image.png

v-for内部是一个箭头函数
image.png

这里需要注意下 因为内部是一个函数运行的结果 后面需要加上小括号
所以前面需要用一个括号括上(()=>'abcde')()
运行结果
image.png

箭头函数传参
image.png

运行结果


image.png

遍历对象
image.png

运行结果
image.png

显示key值
image.png

运行结果
image.png

显示索引
image.png

运行结果
image.png

索引还可以更改
image.png

运行结果
image.png

v-for指令 遍历对象 表达式内容 () in 对象 小括号里面有三个参数 参数名字随意定义 但是顺序依次是 对象值 对象key 索引值
与v-if搭配使用
image.png

运行结果
image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容