demo.html

 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"

       xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Vue Demo</title>

     <!--自选版本-->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 生产环境版本，优化了尺寸和速度 -->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

 </head>

 <body>

 <div id="app">

     <div>

         <h2>v-for举例说明</h2>

         <div>

             <!--数组下标-->

             <!--{{names[0]}}-->

             <!--数组遍历-->

             <div>

                 <h3>数组遍历</h3>

                 <ul>

                     <li v-for="name in names">

                         {{name}}

                     </li>

                 </ul>

             </div>

             <hr>

             <!--对象数组遍历-->

             <div>

                 <h3>对象数组遍历</h3>

                 <ul>

                     <li v-for="user,index in users">

                         {{index+1}}.{{user.name}} - {{user.age}}

                     </li>

                 </ul>

             </div>

             <hr>

             <div>

                 <h3>对象数组遍历(template)</h3>

                 <template v-for="user,index in users">

                     <p>

                         <span>{{user.name}}</span> -

                         <span>{{user.age}}</span>

                     </p>

                 </template>

             </div>

             <hr>

             <div>

                 <h3>对象数组遍历(key-value)</h3>

                 <div v-for="user,index in users">

                     {{index+1}}.

                     <span v-for="value,key in user">

                         {{key}} : {{value}} 、

                     </span>

                 </div>

             </div>

         </div>

     </div>

 </div>

 <script src="app.js"></script>

 </body>

 </html>

app.js

var app = new Vue({

    el: '#app',

    data: {

        names:["Tom","Lily","Mark"],

        users:[

            {"name":"Tom","age":"26"},

            {"name":"Lily","age":"31"},

            {"name":"Mark","age":"18"}

        ]

    },

    methods: {},

    computed: {}

})

截图：

vue之v-for使用说明的更多相关文章

  1. Vue自己写组件——Demo详细步骤

    公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  3. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  4. vue集成环信IM

    vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1  123456  test2  123456  test3  123456 默 ...

  5. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  6. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  7. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  8. vue基础响应式数据

    1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...

  9. vue.js 配置axios 用来ajax请求数据

    * 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...

  10. 第六十二篇：Vue的双向绑定与按键修饰符

    好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...

随机推荐

  1. ORA-00600: internal error code, arguments: [2662]

    转自 http://www.eygle.com/archives/2005/12/oracle_diagnostics_howto_deal_2662_error.html 在ORA-00600 22 ...

  2. Flask 框架 重定向，捕获异常，钩子方法及使用jsonify在网页返回json数据

    Flask 框架中常用到重定向方法来实现路由的跳转 ,路由跳转又分为站内跳转和站外跳转 常用的站内跳转方法为url_for  而常用的站外跳转为redirect 在这里提示一下: 在使用两种方法是须调 ...

  3. 初学Python——第一节课

    一.Python语言的特性: 1.与C语言不同,Python语言是一门解释性语言.程序在执行过程中,执行一步.编译一步. 2.Python是一个动态类型语言,不需要定义变量的数据类型. 3.Pytho ...

  4. jenkins+svn安装

    参考资料: http://blog.csdn.net/wuxuehong0306/article/details/50016547 https://www.ibm.com/developerworks ...

  5. ASP.NET Core 2.1 源码学习之 Options[1]:Configure

    配置的本质就是字符串的键值对,但是对于面向对象语言来说,能使用强类型的配置是何等的爽哉! 目录 ASP.NET Core 配置系统 强类型的 Options Configure 方法 Configur ...

  6. Groovy语言学习--语法基础（3）

    侧重点可能是groovy metaClass基元类的概念,有点像java的反射,因为java反射目前基本也没研究过,就mark一下,后续若有用到就深入研究一下. 基础语法的东西貌似差不多八九不离十了, ...

  7. C# 实现实时网速

    前言 最近参加了一个项目,所以写博客的时间就少了,项目中有一个功能就是在窗体上显示实时网速,用了半天的时间写了出来,想想今天时间蛮充足,就把它分享到博客上吧. 项目展示 项目核心代码: private ...

  8. 【Python】动手分析天猫内衣售卖数据，得到你想知道的信息

    大家好,希望各位能怀着正直.严谨.专业的心态观看这篇文章.ヾ(๑╹◡╹)ﾉ" 接下来我们尝试用 Python 抓取天猫内衣销售数据,并分析得到中国女性普遍的罩杯数据.最受欢迎的内衣颜色是什么 ...

  9. DSL 系列（2） - 插件的论述与实现

    前言 本文主要探讨基于 DSL(domain specific language) 之上的插件设计,他们是领域的附属,为领域提供额外的服务,但领域不依赖于他们. 1. 论述 领域应当尽可能地去专注他的 ...

  10. Python全栈开发之路 【第十六篇】：jQuey的动画效果、属性操作、文档操作、input的value

    01-动画效果 show 显示 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数: speed:三种预定速度之一的字符串('slow','normal','fast')或 ...