vue.js循环语句

  • 循环使用 v-for 指令。

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>vue.js循环语句</title>
  6.         <script src="vue.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <ol>
  11.                 <li v-for="site in sites">
  12.                     {{site.name}}
  13.                 </li>
  14.             </ol>
  15.         </div>
  16.     </body>
  17.     <script>
  18.     new Vue({
  19.         el: '#app',
  20.         data: {
  21.             sites: [
  22.                 {name: 'Baidu'},
  23.                 {name: 'Google'},
  24.                 {name: 'Taobao'}
  25.             ]
  26.         }
  27.     })
  28.     </script>
  29. </html>
  • 模板中使用 v-for：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>vue.js循环语句</title>
  6.         <script src="vue.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <template>
  11.                 <li v-for="site in sites">
  12.                     {{site.name}}
  13.                 </li>
  14.             </template>
  15.         </div>
  16.     </body>
  17.     <script>
  18.     new Vue({
  19.         el: '#app',
  20.         data: {
  21.             sites: [
  22.                 {name: 'Baidu'},
  23.                 {name: 'Google'},
  24.                 {name: 'Taobao'}
  25.             ]
  26.         }
  27.     })
  28.     </script>
  29. </html>

v-for迭代对象

  • v-for可以通过一个对象的属性来迭代数据
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>loop object of vue</title>
  6.         <script src="vue.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <div v-for="value in Object">
  11.                 {{value}}
  12.             </div>
  13.         </div>
  14.         <script>
  15.         new Vue({
  16.             el: '#app',
  17.             data: {
  18.                 Object: {
  19.                     name:'baidu',
  20.                     url: 'www.baidu.com',
  21.                     slogan: '搜素引擎'
  22.                 }
  23.             }
  24.         })
  25.         </script>
  26.     </body>
  27. </html>
  • 也可以提供第二个的参数为键名：
  1.         <div id="app">
  2.                 <div v-for="(value, key) in Object">
  3.                         {{key}} : {{value}}
  4.                 </div>
  5.         </div>
  • 也可以提供第三个参数为索引：
  1. <li v-for="(value, key, index) in Object">
  2.     {{ index }}. {{ key }} : {{ value }}
  3. </li>

v-for 迭代整数

  • v-for 也可以循环整数
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>loop object of vue</title>
  6.         <script src="vue.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.                 <ul>
  11.                     <li v-for="n in 10">
  12.                         {{n}}
  13.                     </li>
  14.                 </ul>
  15.         </div>
  16.         <script>
  17.         new Vue({
  18.             el: '#app'
  19.         })
  20.         </script>
  21.     </body>
  22. </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. 【转载】Spring Boot：常用属性汇总

    附录A.常用应用程序属性 摘自:https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-pr ...

  2. oracle两表中的两列进行模糊匹配的方法

    SELECT T2.列名,T1.列名  FROM 主表 T1, 匹配表 T2    WHERE  T1.匹配列  LIKE CONCAT('%',concat(T2.匹配列,'%')); 注意:  a ...

  3. Pikachu漏洞练习平台实验——不安全的文件下载和上传（七）

    1.不安全的文件下载 1.1.概述 文件下载功能在很多web系统上都会出现,一般我们当点击下载链接,便会向后台发送一个下载请求,一般这个请求会包含一个需要下载的文件名称,后台在收到请求后 会开始执行下 ...

  4. JavaScript.convertArray

    function convertArray(nodeList){     var arr = []     if(Array.prototype.slice){         arr = [].sl ...

  5. [AGC028D](dp计数)

    题解点我 Code #include <bits/stdc++.h> typedef long long LL; typedef unsigned long long uLL; #defi ...

  6. 洛谷 P5019 铺设道路 & [NOIP2018提高组]（贪心）

    题目链接 https://www.luogu.org/problem/P5019 解题思路 一道典型的贪心题. 假设从左往右填坑,如果第i个深与第i+1个,那么第i+1个就不需要额外填: 如果第i+1 ...

  7. Day6----Python的pyinstall库的使用

    Python的pyinstaller库 pyinstaller的安装 介绍:pyinstaller是Python的第三方库,主要用于将Python代码打包成  可执行文件    ,以此达到就算没安装P ...

  8. Codeforces Round #535 E2-Array and Segments (Hard version)

    Codeforces Round #535 E2-Array and Segments (Hard version) 题意: 给你一个数列和一些区间,让你选择一些区间(选择的区间中的数都减一), 求最 ...

  9. Django学习记录--~Biubiubiu

    Day One Django常用命令 1.创建Django网站框架 django-admin startproject mysite # mysite为定义的项目文件夹名称 2.超级用户创建 py m ...

  10. oooooooooooooooo

    安装后打开mysqld配置项加入skip-grant-tables可以无密码登录,登录进去后修改密码修改成功删除skip-grant-tables mysql> select user, plu ...