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. phpcms php格式化 时间戳

    用PHPCMS V9 建站时,经常会用到时间标签,它是通用标签调用-日期时间格式化,适用全站. 一.日期时间格式化显示: a\标准型:{date('Y-m-d H:i:s', $rs['inputti ...

  2. 字符串类——KMP子串查找算法

    1, 如何在目标字符串 s 中,查找是否存在子串 p(本文代码已集成到字符串类——字符串类的创建(上)中,这里讲述KMP实现原理) ? 1,朴素算法: 2,朴素解法的问题: 1,问题:有时候右移一位是 ...

  3. python +requests 爬虫-爬取图片并进行下载到本地

    因为写12306抢票脚本需要用到爬虫技术下载验证码并进行定位点击所以这章主要讲解,爬虫,从网页上爬取图片并进行下载到本地   爬虫实现方式: 1.首先选取你需要的抓取的URL:2.将这些URL放入待抓 ...

  4. IDF-CTF-不难不易的js加密 writeup

    题目链接: http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=28 就是这里 → http://ctf.idf.c ...

  5. [Linux] 004 安装

    1. 安装欢迎界面 Install or upgrade an existing system 安装或升级现有系统 Install system with basic video driver 安装过 ...

  6. 探究activity-android学习第三天

    转载来源:https://www.jianshu.com/p/f8c68b3c2847?utm_campaign=maleskine&utm_content=note&utm_medi ...

  7. Linux grep常用命令

    在一个文件中同时查找多个字符串: 并集语法: grep -e 'pattern1 -e 'pattern2 file 或集语法: 1.grep -E 'pattern1|pattern2' file ...

  8. 77.LRU Cache（最近最久未使用算法）

    Level:   Hard 题目描述: Design and implement a data structure for Least Recently Used (LRU) cache. It sh ...

  9. 暂时放弃ts版个人博客转js版博客

    我本打算信心满满的做个vue+ts做个博客的,其实架构搭的差不多了,但是我在用vuex的时候发现一个自己无法忍受的瑕疵,那就是在用vuex的时候,得利于普通版vuex的map语法糖实在太好用,这把我惯 ...

  10. CSS中的关系选择器

    关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择 ...