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. SPSS详细教程：OR值的计算

    SPSS详细教程:OR值的计算 一.问题与数据 研究者想要探索人群中不同性别者喜欢竞技类或娱乐性体育活动是否有差异.研究者从学习运动医学的学生中随机招募50名学生,记录性别并询问他们喜欢竞技类还是娱乐 ...

  2. python简单的函数定义和用法实例

    python简单的函数定义和用法实例 这篇文章主要介绍了python简单的函数定义和用法,实例分析了Python自定义函数及其使用方法,具有一定参考借鉴价值,需要的朋友可以参考下 具体分析如下: 这里 ...

  3. mongo可视化工具adminMongo安装

    git环境搭建下载地址:https://git-scm.com/downloads 此处,安装环境为windows操作系统,所以选择windows版本下载一直下一步,直至安装完成找到安装git的目录下 ...

  4. HBase备份还原OpenTSDB数据之Snapshot

    前言 本文基于伪分布式搭建 hadoop+zookeeper+hbase+opentsdb之后,想了解前因后果的可以看上一篇和上上篇. opentsdb在hbase中生成4个表(tsdb, tsdb- ...

  5. Learning OSG programing---osgAnimation（3）

    接下来是用createModel函数创建模型: osg::ref_ptr<osg::Group> createModel(bool overlay, osgSim::OverlayNode ...

  6. Java程序流程控制

    程序流程控制有 选择,循环,以及跳转结构 选择结构中无非就是 If 和 switch语句我两种都做了一些小案例 1. 利用Scanner库来获得控制台用户输入的数字与代码中定义的变量比较 packag ...

  7. jvm学习（5） 对象的创建与结构

    上图表明:jvm虚拟机位于操作系统的堆中,并且,程序员写好的类加载到虚拟机执行的过程是:当一个classLoder启动的时候,classLoader的生存地点在jvm中的堆,然后它会去主机硬盘上将A. ...

  8. vmware linux root密码破解

    centOS: 1.开机过程按上下箭头键,让系统不要进入到引导程序中, 2.按 'e' 进入到编辑模式 3.找到linux16开始的首行,在末尾加入'rw init=/bin/sh' (会出现修改密码 ...

  9. Service vs provider vs factory 转自：http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory

    请看此链接:http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory

  10. C语言接口

    struct i_foo * foobar_foo(void); //返回接口指针struct foo_object * foo_create(struct i_foo *iface, void *d ...