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. Git是目前世界上最先进的分布式版本控制系统（没有之一）。

    http://zhidao.baidu.com/link?url=NSYPiSvtGTMoqMA9vt68FRRF8WbfYVmwWeMh47_2lkp0K3jFMl--1Co1tg1R4VshTQV ...

  2. python web自动化测试框架搭建(功能&接口)——接口测试模块

    Python接口测试采用python读取excel的方法,通过requests库发送请求和接收响应.模块有: Data:用于存放excel用例的,用例格式: iutil: 接口公共方法,数据引擎.ht ...

  3. c#Cache的用法

    public class Cache { /// <summary> /// 获取数据缓存 /// </summary> /// <param name="ca ...

  4. WPS for linux 中不能切换到中文输入法

    转载自:http://blog.sciencenet.cn/blog-200199-1032795.html 尽管安装有中文输入法,wps有时仍然不能切换到中文输入法,此问题解决方案如下: 根账户下打 ...

  5. kmp（单次匹配）

    http://acm.hdu.edu.cn/showproblem.php?pid=1711 Number Sequence Problem Description Given two sequenc ...

  6. Cannot modify header information - headers already sent by出错的原因

    <?php ob_start(); setcookie("username","送家",time()+3600); echo "the user ...

  7. 二进制安装kubernetes集群

    链接地址 https://www.cnblogs.com/leleyao/p/10453848.html  安装etcd 证书制作 apiserver 证书 [root@master01 ssl]# ...

  8. python学习第六天--匿名函数、过滤、映射

    匿名函数 lambda表达式 过滤器 filter(判断函数,可迭代对象) 会根据提供的函数对指定序列做过滤 映射 map(判断函数,可迭代对象) 会根据提供的函数对指定序列做映射

  9. SQL 查询 group by 的使用注意点

    今天用SQL Server尝试实现一个SQL语句的时候,报了如标题所示的错误,通过在百度里面搜索,并亲自动手实现,终于发现问题所在,现在把它记录下来. 语句如下:     select [OrderI ...

  10. Python之带有外部状态的生成器函数

    带有外部状态的生成器函数,也就是你的生成器暴露外部状态给用户解决: 定义一个类,然后把生成器函数放到 __iter__() 方法中过去 定义一个类,然后把生成器函数放到 __iter__() 方法中过 ...