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