vue学习笔记6-循环-v-for

普通for迭代关键字——v-for 格式: v-for=“a in b” 当我们在便签上加上v-for属性的时候就会迭代b对象,然后把迭代信息放到a中,之后直接使用a属性就可以。

<div id="app">
    <ul>
        <li v-for="data in datas">
            {{ data }}
        </li>
    </ul>
</div>

如果data是一个对象,那么可以使用data.xxx来获取到这个属性

最多可以使用三个参数对应着迭代对象属性 value,key,index 对应着 对象的值,对象的值对应着的键,索引(从0开始)

也可以直接迭代整数

<div id="app"> 
<ul>
 <li v-for="n in 10"> 
      {{ n }}
 </li> 
</ul> 
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏陈纪庚

vue.js响应式原理解析与实现—实现v-model与{{}}指令

上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天,我们就...

25820
来自专栏lgp20151222

select动态绑定vue.js

25010
来自专栏郭少华

(Vue全家桶)Vue-cli

安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和...

32630
来自专栏知道一点点

vue.js入门

36240
来自专栏前端知识分享

Vue---从后台获取数据vue-resource的使用方法

  作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法...

38510
来自专栏计算机编程

ionic 2.x の初见与坑

<h3>1、简单介绍:</h3> <p >博主是从来没有碰过angularJS 1.x与ionic 1.x的初学者,面对它们两者同时进入2.0时代(隔壁vue...

20620
来自专栏陈纪庚

vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也...

22130
来自专栏郭少华

(第一季)Vue2.0-内部指令

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

13330
来自专栏我的社区

基于Netty实现可自动渲染HTML页面的静态Web服务器

Github:https://github.com/yueshutong/JerryServer/ 码云:https://gitee.com/zyzpp/J...

54720
来自专栏程序小工

【React入门】实现todolist功能

作为一名 PHP 初级的程序员,目前尚且处于学习 PHP 业务逻辑实现到日常工作中的阶段,但是由于现在想要搭建一个满意的个人博客,并且尝试过很多 hexo 主题...

52520

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励