Vue.js--循环语句（v-for）

不念不忘少年蓝@ 2021-08-13 11:23 508阅读 0赞

#### 循环语句 ####

循环语句使用v-for指令。  
v-for指令需要以**site in sites**形式的特殊语法，sites是元数据数组并且site是数组元素迭代的别名。

**v-for可以绑定数据到数据来渲染一个列表：**

<div id="app">
      <ol>
        <li v-for="site in sites">
          {
       { site.name }}
        </li>
      </ol>
    </div>
     
    <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>

**模板中使用v-for：**

<ul>
      <template v-for="site in sites">
        <li>{
       { site.name }}</li>
        <li>--------------</li>
      </template>
    </ul>

**v-for迭代对象：**  
v-for可以通过一个对象的属性来迭代数据：

<div id="app">
        <ul>
            <li v-for="value in object">
                {
       { value }}
            </li>
        </ul>
    </div>
    
    <script> new Vue({ el: '#app', data: { object: { name: '百度', url: 'http://www.baidu.com', slogan: '百度一下，你就知道' } } }) </script>

**也可以提供第二个的参数为键名：**

<div id="app">
      <ul>
        <li v-for="(value, key) in object">
        {
       { key }} : {
       { value }}
        </li>
      </ul>
    </div>

![在这里插入图片描述][20191009153730979.png]  
**第三个参数为索引：**

<div id="app">
        <ul>
            <li v-for="(value, key, index) in object">
                {
       { index }}. {
       { key }} : {
       { value }}
            </li>
        </ul>
    </div>

![在这里插入图片描述][20191009153847608.png]**v-for迭代整数：**

<div id="app">
      <ul>
        <li v-for="n in 10">
         {
       { n }}
        </li>
      </ul>
    </div>

[20191009153730979.png]: /images/20210813/d0abdda768dd4622a8f0b827ccebca9e.png
[20191009153847608.png]: /images/20210813/6294d60d85b9418680b2ff88062238ab.png

发表评论取消回复

表情：

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

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

相关阅读

相关循环语句

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

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

相关循环语句

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

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

相关循环语句

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

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

相关循环语句——for循环

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

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

相关循环语句

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

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

相关条件语句、循环语句

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

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

相关循环语句

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

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

相关循环语句

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

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

相关循环语句

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

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

相关分支语句循环语句

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

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