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. java Json 技术记录

    1.Json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包,包括commons-beanutils.jar,commons-c ...

  2. C#后台获取当前时间并格式化

    最常用的:DateTime.Now.ToString("yyyy-MM-dd"); //今天DateTime.Now.Date.ToShortDateString(); //昨天, ...

  3. Ngnix VS Apache

    Ngnix和Apache各有优缺点, Ngnix在并发性能上比Apache好太多了 原因是,Ngnix是采用的epoll网络I/O模型, 而Apache采用的是select网络I/O模型 具体参见:  ...

  4. SpringMVC请求处理流程源码

    我们首先引用<Spring in Action>上的一张图来了解Spring MVC 的核心组件和大致处理流程: 从上图中看到①.DispatcherServlet 是SpringMVC ...

  5. 2015 GDUT校赛

    周末打了个GDUT的校赛,也是作为SCAU的一场个人排位. 比赛中竟然卡了个特判,1个半钟就切了5条了,然后一直卡. 还有其他两条可以做的题也没法做了,性格太执着对ACM来说也是错呀. 讲回正题 . ...

  6. 表单验证之在a标签跳转之前执行其他操作（DOM与$两种实现方式）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. c#catch循环内捕获到异常继续循环

    一,如果我们将异常而不影响循环,如下代码: using System; using System.Collections.Generic; using System.Linq; using Syste ...

  8. ubuntu安装supervisor以及使用supervisor启动.net core进程

    1.下载.net core项目ubuntu系统运行容器dotnet      1.版本:dotnet-sdk-2.1.3-linux-x64.tar.gz      2.将下载好的包上传到ubuntu ...

  9. 分析abex'crackme#1

    测试文件下载:https://www.wocloud.com.cn/webclient/share/sindex.action?id=i9K_Br6TgE7Kf_YTF04yHmKcRy5TUdZ8U ...

  10. ansiable介绍及安装

    ansible介绍: Ansible默认通过 SSH 协议管理机器. ssh协议介绍:https://www.cnblogs.com/yaozhiqiang/p/9944894.html 安装ansi ...