v-for 循环语句

收藏966

阅读13896

更新时间2025-08-22

循环数组

循环数组以显示不同的图像:

示例

根据 Vue 实例中的数组显示食物图像。

 
»

循环对象数组

循环遍历对象数组并显示对象属性:

示例

根据 Vue 实例中的数组显示不同类型食物的图像和名称。

 
       
{{ x.name }}
 
»

获取索引

数组元素的索引号在 JavaScript for 循环中非常有用。 幸运的是,在 Vue 中使用 v-for 时我们也可以获得索引号。

要获取 v-for 的索引号,我们需要在括号中给出两个逗号分隔的单词:第一个单词将是数组元素,第二个单词将是该数组元素的索引。

示例

显示 Vue 实例中"manyFoods"数组中元素的索引号和食物名称。

  {{ index }}: "{{ x }}"

»

如果数组元素是对象,我们还可以显示数组元素索引和数组元素本身的信息:

示例

显示数组元素索引号以及"manyFoods"数组中对象的文本。

  {{ index }}: "{{ x.name }}", url: "{{ x.url }}"

»

Vue 练习

通过练习测试自己

练习题:

Vue 中的列表渲染可以基于数组创建多个 HTML 元素。

什么 Vue 指令使这成为可能?

v-

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号