vue.js循环语句

  • 循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组, site 是数组元素迭代的别名。

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue.js循环语句</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

            <ol>

                <li v-for="site in sites">

                    {{site.name}}

                </li>

            </ol>

        </div>

    </body>

    <script>

    new Vue({

        el: '#app',

        data: {

            sites: [

                {name: 'Baidu'},

                {name: 'Google'},

                {name: 'Taobao'}

            ]

        }

    })

    </script>

</html>
  • 模板中使用 v-for：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue.js循环语句</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

            <template>

                <li v-for="site in sites">

                    {{site.name}}

                </li>

            </template>

        </div>

    </body>

    <script>

    new Vue({

        el: '#app',

        data: {

            sites: [

                {name: 'Baidu'},

                {name: 'Google'},

                {name: 'Taobao'}

            ]

        }

    })

    </script>

</html>

v-for迭代对象

  • v-for可以通过一个对象的属性来迭代数据
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>loop object of vue</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

            <div v-for="value in Object">

                {{value}}

            </div>

        </div>

        <script>

        new Vue({

            el: '#app',

            data: {

                Object: {

                    name:'baidu',

                    url: 'www.baidu.com',

                    slogan: '搜素引擎'

                }

            }

        })

        </script>

    </body>

</html>
  • 也可以提供第二个的参数为键名：
        <div id="app">

                <div v-for="(value, key) in Object">

                        {{key}} : {{value}}

                </div>

        </div>
  • 也可以提供第三个参数为索引：
<li v-for="(value, key, index) in Object">

    {{ index }}. {{ key }} : {{ value }}

</li>

v-for 迭代整数

  • v-for 也可以循环整数
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>loop object of vue</title>

        <script src="vue.min.js"></script>

    </head>

    <body>

        <div id="app">

                <ul>

                    <li v-for="n in 10">

                        {{n}}

                    </li>

                </ul>

        </div>

        <script>

        new Vue({

            el: '#app'

        })

        </script>

    </body>

</html>

vue.js循环语句的更多相关文章

  1. Vue.js 循环语句

    循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. v-for 指令: v-for 可以 ...

  2. Vue.js——循环（Java、JSTL标签库、数据库）

    一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...

  3. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  4. js循环语句

    1.for循环 for(语句1:语句2:语句3){ 代码块 } //语句1:初始化表达式; //语句2:条件表达式; //语句3:更新表达式; 2.for-in循环 for(x in object){ ...

  5. JS循环语句的理解

    循环语句就是让程序重复性去做某些工作 最常见的就是for循环 那它的写法都有哪些呢? 1.必须要有初始值 2.要有条件判断 3.状态的改变 4.循环体 一定要控制循环多少次结束,否则就变成了死循环,消 ...

  6. Vue(三)--循环语句

    v-for: v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. demo1. <!DOCTYPE html&g ...

  7. JS循环语句！

    <1> for(1.初始值(初始值只有一次):2.判断条件:4.状态改变){ 3.执行语句: //如果判断条件为true,则进入死循环:不设执行语句浏览器会未响应: } <2> ...

  8. js循环语句while，do..while，for

    1. while循环 while(循环条件){ 循环体语句块; } 2.do..while循环 do{ 循环体语句块; }while(循环条件) 两者区别:while先判断后执行.循环体语句可能一次都 ...

  9. JS循环语句作业讲解（折纸、兔子生兔子、买东西组合）

    1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米: varn = 0;varg = 0.0001;while(){ g= g *2; n++ (g>8848bre ...

随机推荐

  1. mysql之存储过程基础篇

    1.  创建/使用数据库 mysql> create database me; mysql> use me; 2.  创建表 mysql> create table Stu(Sno ...

  2. CentOS 7.3 安装MySQL 5.7并修改初始密码

    在CentOS 7.3 下安装MySQL 5.7并修改初始密码,Windows下安装MySQL 5.7 见 http://www.linuxidc.com/Linux/2017-11/148521.h ...

  3. Vagrant 手册之 Vagrantfile - 提示及技巧

    原文地址 Vagrantfile 是一种非常灵活的配置格式.语法基于 Ruby,可以用它做很多事情.在本页使用一些提示和技巧时,请注意正确使用它们. 1. 使用循环定义虚拟机 如果你想对多机器应用稍微 ...

  4. poj2377Bad Cowtractors （最小生成树变形之——最大生成树）

    题目链接:http://poj.org/problem?id=2377 Description Bessie has been hired to build a cheap internet netw ...

  5. 普通ACL访问控制列表

    配置OSPF R1: R2: R3: R4: 在R1上查看OSPF的学习 测试R1与R4环回接口连通性 配置普通ACL访问控制列表: 先在R4配置密码用R1与R4建立telnet建立 密码huawei ...

  6. Eclipse常见版本和JDK常用版本对应关系

    Luna 4.4  JDK1.6Mars 4.5  JDK1.7             Neon 4.6  JDK1.8Oxygen 4.7 JDK1.8Photon 4.8  2019年3月

  7. CSRF——跨站请求伪造

    一.CSRF是什么CSRF,全称:Corss-site request forgery,中文名称:跨站请求伪造.CSRF攻击比XSS攻击更具危险性,被安全界称为“沉睡的巨人”. 二.CSRF可以做什么 ...

  8. C# 一个网站

    http://www.aizhengli.com/aspnet-mvc5/6/aspnet-mvc5-member-user-register.html

  9. Tesseract-OCR识别中文与训练字库

    转自:https://www.cnblogs.com/lcawen/articles/7040005.html 关于中文的识别,效果比较好而且开源的应该就是Tesseract-OCR了,所以自己亲身试 ...

  10. linux驱动启动顺序

    首先,我们可以查看Linux内核编译完成后的System.map文件,在这个文件中我们可以看到macb(dm9161驱动模块)链接到了dm9000驱动之前,如下所示: c03b6d40 t __ini ...