Vue.js 循环语句

桃扇骨 2024-03-30 10:38 28阅读 0赞

v-for 指令

`v-for` 指令可以绑定数组的数据来渲染一个项目列表：

> 1.  `<template>`
> 2.  `<ol>`
> 3.  `<li v-for="site in sites">`
> 4.  `{ { site.name }}`
> 5.  `</li>`
> 6.  `</ol>`
> 7.  `</template>`
> 8.  `<script>`
> 9.  `export default {`
> 10. `name: 'MyTemplate',`
> 11. `data() {`
> 12. `return {`
> 13. `sites: [`
> 14. `{name: 'Ddandelioncloud'},`
> 15. `{name: 'Google'},`
> 16. `{name: 'Taobao'}`
> 17. `]`
> 18. `}`
> 19. `}`
> 20. `}`
> 21. `</script>`

**v-for 迭代对象**

> 1.  `<template>`
> 2.  `<ul>`
> 3.  `<li v-for="value in object">`
> 4.  `{ { value }}`
> 5.  `</li>`
> 6.  `</ul>`
> 7.  `</template>`
> 8.  `<script>`
> 9.  `export default {`
> 10. `name: 'MyTemplate',`
> 11. `data() {`
> 12. `return {`
> 13. `object: {`
> 14. `name: '蒲公英云',`
> 15. `url: 'http://www.dandelioncloud.cn',`
> 16. `slogan: '学的不仅是技术，更是梦想！'`
> 17. `}`
> 18. `}`
> 19. `}`
> 20. `}`
> 21. `</script>`

或者

> 1.  `<ul>`
> 2.  `<li v-for="(value, key, index) in object">`
> 3.  `{ { index }}. { { key }} : { { value }}`
> 4.  `</li>`
> 5.  `</ul>`

key为键名 index 为索引

**同时v-for还支持迭代整数**

> 1.  `<ul>`
> 2.  `<li v-for="n in 10">`
> 3.  `{ { n }}`
> 4.  `</li>`
> 5.  `</ul>`

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关循环语句

1 for循环结构（重点）循环语句可以在满足循环条件的情况下，反复执行某一段代码，这段被重复执行的代码被称为循环体语句，当反复执行这个循环体时，需要在合适的时候把循环

野性酷女/ 2024年03月16日 12:48/ 0 赞/ 34 阅读

相关循环语句

文章目录循环语句 1.while 2.do...while 3.for 4.for...in 总结

短命女/ 2022年11月12日 08:28/ 0 赞/ 275 阅读

相关循环语句

顺序结构 > Java的基本结构就是顺序结构，除非特别指出，否则就按照顺序一句一句执行 > > 顺序结构是最简单的算法结构 > > 语句与语句之间，框与框之间是按照从上到

深藏阁楼爱情的钟/ 2022年10月31日 13:43/ 0 赞/ 249 阅读

相关循环语句——for循环

文章目录前言一、循环结构概述语句二、for循环、while循环、do...while循环应用场景分析三、for循环 1.for

不念不忘少年蓝@/ 2022年10月27日 13:56/ 0 赞/ 375 阅读

相关循环语句

while 先判断再执行 int i = 1; while (i<=100) {

╰半橙微兮°/ 2022年08月19日 15:19/ 0 赞/ 259 阅读

相关条件语句、循环语句

1.if()\{\}语句与短路语句&&的转化 if(1>2){ document.write('a')} ===> 1>2 && document.w

傷城~/ 2022年06月04日 00:47/ 0 赞/ 501 阅读

相关循环语句

do while循环 do \{ \}while(表达式) // 表达为true时,执行循环体(大括号括起来的内容),如果为false时,不再执行循环体缺点:

骑猪看日落/ 2022年05月20日 04:36/ 0 赞/ 385 阅读

相关循环语句

循环语句的分类主要分为三类： for循环 while循环 do-while循环循环的四要素：1.初始条件 2.循环条件 3.控制条件 4.循环体

梦里梦外;/ 2022年03月27日 12:04/ 0 赞/ 441 阅读

相关循环语句

语法: 第一种 While(条件表达式)\{ 语句…. \} 第二种 Do\{ 语句 \} while(条件表达式) 第二种

傷城~/ 2022年01月06日 14:41/ 0 赞/ 488 阅读

相关分支语句循环语句

选择语句: 1.单if语句 2.if-else语句 3.多重if语句 4.嵌套if语句 1.单if语句格式: if(条件表达式) \

素颜马尾好姑娘i/ 2021年11月09日 02:38/ 0 赞/ 723 阅读