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. call apply bind的作用及区别？ 应用场景？

    call.apply.bind方法的作用和区别: 这三个方法的作用都是改变函数的执行上下文,换句话说就是改变函数体内部的this指向,以此来扩充函数依赖的作用域 1.call 作用:用于改变方法内部的 ...

  2. 接口偶尔超时，竟又是JVM停顿的锅！

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 继上次我们JVM停顿十几秒的问题解决后,我们系统终于稳定了,再也不会无故重启了! 这是之前的文章:耗时几个月,终于 ...

  3. javascript写无缝平移的轮播图

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

  4. java中常见的锁

    1.悲观锁 认为别的线程都会修改数据,二话不说先锁上 synchronized 2.乐观锁 乐观豁达,起初不操作.最后修改的时候比对一下版本,不一致再上锁 3.可重入锁 外层锁了之后,内层仍可以直接使 ...

  5. jvm jni 及 pvm pybind11 大批量数据传输及优化

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  6. 抓包整理外篇——————autoResponder、composer 、statistics [ 三]

    前言 经过了前文的介绍的部分已经能够为自己抓包提供一个舒适的环境了,但是舒服的拿到我们的包后,可能有些需求还是难以搞定,fiddler 提供了我们一些其他模块,让我们工作轻松,请往下看. 正文 aut ...

  7. 手写一个模拟的ReentrantLock

    package cn.daheww.demo.juc.reentrylock; import sun.misc.Unsafe; import java.lang.reflect.Field; impo ...

  8. Tapdata Cloud 2.1.4 来啦：数据连接又上新，PolarDB MySQL、轻流开始接入，可自动标记不支持的字段类型

      需求持续更新,优化一刻不停--Tapdata Cloud 2.1.4 来啦!   最新发布的版本中,在新增数据连接之余,默认标记不支持同步的字段类型,避免因此影响任务的正常运行. 更新速览 ① 数 ...

  9. java 配置aop 写入无效

    一个项目不同的Module 含有相同的路径以及文件,配置的AOP的expression吸入日志无效,要点击包查看当前包是否是本Module下面的,不然调用无效. 改为本Module就行了

  10. day06 Socket_线程API_线程并发安全

    使用多线程实现多客户端连接服务端 流程图 服务端代码改造: package socket; import java.io.BufferedReader; import java.io.IOExcept ...