循环数组以显示不同的图像:
根据 Vue 实例中的数组显示食物图像。
<div> <img v-for="x in manyFoods" v-bind:src="x"> </div> »循环遍历对象数组并显示对象属性:
根据 Vue 实例中的数组显示不同类型食物的图像和名称。
<div> <figure v-for="x in manyFoods"> <img v-bind:src="x.url"> <figcaption>{{ x.name }}</figcaption> </figure> </div> »数组元素的索引号在 JavaScript for 循环中非常有用。 幸运的是，在 Vue 中使用 v-for 时我们也可以获得索引号。
要获取 v-for 的索引号，我们需要在括号中给出两个逗号分隔的单词:第一个单词将是数组元素，第二个单词将是该数组元素的索引。
显示 Vue 实例中"manyFoods"数组中元素的索引号和食物名称。
<p v-for="(x, index) in manyFoods"> {{ index }}: "{{ x }}" <br> </p> »如果数组元素是对象，我们还可以显示数组元素索引和数组元素本身的信息:
显示数组元素索引号以及"manyFoods"数组中对象的文本。
<p v-for="(x, index) in manyFoods"> {{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br> </p> »相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.2万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.7万人学习
