Vue.js 循环语句

<div id="app">

  <ol>

    <li v-for="site in sites">      /*for的特殊格式,site in sites,嗯我把他理解为数据在数据组里,然后循环*/
　　　　{{ site.name }}    /*试了下,<template>,<li>,<p>里面都是可以用v-for, <li>能够加上序号在进行输出,*/

    </li>

  </ol>

</div>

<script>

new Vue({

  el: '#app',　　　　　　　　　　

  data: {

    sites: [

      { name: 'Runoob' },　　　　         /*将sites中的name数据一项一项打出来.*/

      { name: 'Google' },

      { name: 'Taobao' }

    ]

  }

})

</script>

v-for 迭代对象

我要先理解一下迭代是什么:迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。

emmmmmm,迭代，是通过无数次，不断的，重复的，接近一个目标，折返接近，再折返再接近，最终达到目标。它不是一次性完成的，是通过不断重复的，但每次重复又比之前更好一点，这样一种非线性的进程.

(还没有完全理解,等我再理解两天)

上代码:

<div id="app">

  <ul>

    <li v-for="value in object">    /*object中的定值*/

    {{ value }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

甚至还可以双参数,三参数

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="(value, key, index) in object">

     {{ index }}. {{ key }} : {{ value }}　　　　　　　　　　/*三参数对应:index指数,key标签,value定值*/

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

</body>

</html>

第十篇:vue.js for循环语句(大作业进行时)的更多相关文章

  1. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  2. Vue.js：循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

  3. 第六篇:vue.js模板语法(,属性,指令,参数)

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...

  4. #9.5课堂JS总结#循环语句、函数

    一.循环语句 1.for循环 下面是 for 循环的语法: for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环(代码块)开始前执行 语句 2 定义运行循环(代码块) ...

  5. Go语言【第六篇】：Go循环语句

    Go语言循环语句 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句,以下为大多数编程语言循环程序的流程如: Go语言提供了以下几种类型循环处理语句: 循环类型 描述 fo ...

  6. Verilog学习笔记基本语法篇（六）········ 循环语句

    在Verilog中存在着4种类型的循环语句,用来控制执行语句的执行次数. 1)forever语句: 连续执行的语句. 2)repeat语句:  连续执行n次的语句. 3)while语句:    执行语 ...

  7. 1.3if判断语句+while和for循环语句+购物车作业

    1.if 语句 if userame=_usename and password=_password: print("welcome user {name} login..."). ...

  8. vue.js 中slot 用处大（转载）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  9. js之循环语句

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

随机推荐

  1. 适配抖音！三角面转换和3d模型体量减小，轻量化一键即可完成！

    抖音3d特效,可谓是越来越火爆了,这个有着迪士尼画风的3D大眼,就刷屏了国内外用户的首页! 有人好奇这些特效究竟是怎么制作的?其实就是把3D模型调整适配到头部模型上,调整位置或者大小就可以制作出一个简 ...

  2. gulp入门第一课你需要注意的

    安装 1.首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp. npm install -g gulp 2.初始化项目. npm init 3.如果想在安装的时候把gulp写进项目p ...

  3. webpack中文api

    1.      简介 1.Plugins://插件 webpack has a rich plugin interface.Most of the features are internal plug ...

  4. VScode运行总是显示running状态

    一.每次点击运行都显示code is already running,而且键盘也没有办法输入 二.解决办法 注意:记得重新启动VScode

  5. STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...

  6. 减省 Java 小半内存，Solon v1.9.2 发布

    相对于 Spring Boot 和 Spring Cloud 的项目: 启动快 5 - 10 倍. (更快) qps 高 2- 3 倍. (更高) 运行时内存节省 1/3 ~ 1/2. (更少) 打包 ...

  7. Techempower web框架性能测试第21轮结果发布--asp.net core继续前进

    废话不说,直接上结果: Round 21 results - TechEmpower Framework Benchmarks Techempower benchmark是包含范围最广泛的web框架性 ...

  8. 记一次 .NET 某RFID标签管理系统 CPU 暴涨分析

    一:背景 1. 讲故事 前段时间有位朋友说他的程序 CPU 出现了暴涨现象,由于程序是买来的,所以问题就比较棘手了,那既然找到我,就想办法帮朋友找出来吧,分析下来,问题比较经典,有必要和大家做一下分享 ...

  9. Cube Stacking 来源:洛谷

    题目 题目oj(洛谷) Farmer John and Betsy are playing a game with N (1 <= N <= 30,000)identical cubes ...

  10. 事务_基本演示和事务_默认自动提交&手动提交

    事务的基本介绍 概念: 如果一个包含多个步骤的业务操作,被事务管理,那么这些操作要么同时成功,要么同时失败 操作: 开启事务:start transaction; 回滚:rollback; 提交:co ...