demo.html

  1.  <!DOCTYPE html>
  2.  <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
  3.        xmlns:v-on="http://www.w3.org/1999/xhtml">
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title>Vue Demo</title>
  7.      <!--自选版本-->
  8.      <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
  9.      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  10.      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11.      <!-- 生产环境版本，优化了尺寸和速度 -->
  12.      <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
  13.  </head>
  14.  <body>
  15.  <div id="app">
  16.      <div>
  17.          <h2>v-for举例说明</h2>
  18.          <div>
  19.              <!--数组下标-->
  20.              <!--{{names[0]}}-->
  21.  
  22.              <!--数组遍历-->
  23.              <div>
  24.                  <h3>数组遍历</h3>
  25.                  <ul>
  26.                      <li v-for="name in names">
  27.                          {{name}}
  28.                      </li>
  29.                  </ul>
  30.              </div>
  31.              <hr>
  32.              <!--对象数组遍历-->
  33.              <div>
  34.                  <h3>对象数组遍历</h3>
  35.                  <ul>
  36.                      <li v-for="user,index in users">
  37.                          {{index+1}}.{{user.name}} - {{user.age}}
  38.                      </li>
  39.                  </ul>
  40.              </div>
  41.              <hr>
  42.              <div>
  43.                  <h3>对象数组遍历(template)</h3>
  44.                  <template v-for="user,index in users">
  45.                      <p>
  46.                          <span>{{user.name}}</span> -
  47.                          <span>{{user.age}}</span>
  48.                      </p>
  49.                  </template>
  50.              </div>
  51.              <hr>
  52.              <div>
  53.                  <h3>对象数组遍历(key-value)</h3>
  54.                  <div v-for="user,index in users">
  55.                      {{index+1}}.
  56.                      <span v-for="value,key in user">
  57.                          {{key}} : {{value}} 、
  58.                      </span>
  59.                  </div>
  60.              </div>
  61.          </div>
  62.      </div>
  63.  </div>
  64.  <script src="app.js"></script>
  65.  </body>
  66.  </html>

app.js

  1. var app = new Vue({
  2.     el: '#app',
  3.     data: {
  4.         names:["Tom","Lily","Mark"],
  5.         users:[
  6.             {"name":"Tom","age":"26"},
  7.             {"name":"Lily","age":"31"},
  8.             {"name":"Mark","age":"18"}
  9.         ]
  10.     },
  11.     methods: {},
  12.  
  13.     computed: {}
  14. })

截图：

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. day14（2）---列表推导式、生成器推导式、字典推导式、三元表达式

    一.列表推导式: ls = [元素表达式 for i in 可迭代对象 if 筛选条件] 案例: # -*- coding: utf-8 -*- '''列表生成式练习''' # 练习一(三元表达式): ...

  2. 500 : Internal Server Error（jupyter）

    如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10739036.html 一.报错 jupyter notebook能打开目录页,但是 ...

  3. python：利用pymssql模块操作SQL server数据库

    python默认的数据库是 SQLlite,不过它对MySql以及SQL server的支持也可以.这篇博客,介绍下如何在Windows下安装pymssql库并进行连接使用... 环境:Windows ...

  4. SkylineGlobe TerraExplorer Pro 遇到模型显示有锯齿怎么办？

    SkylineGlobe TerraExplorer Pro 遇到模型显示有锯齿怎么办? 这个问题跟软件的版本无关,跟机器的显卡有关,看下面的截图: 试试看,祝你好运!

  5. odoo学习总结

                                                   odoo10总结 1.odoo中的向导应用. .py文件 # -*- coding: utf-8 -*-f ...

  6. AWS re：Invent（2019.01.09）

    时间:2019.01.09地点:北京国际饭店

  7. git创建新分支

    1.创建本地分支 git branch 分支名,例如:git branch 2.0.1.20120806 注:2.0.1.20120806是分支名称,可以随便定义.   2.切换本地分支 git ch ...

  8. python 打包下载 zipfile & tarfile

    看百度网盘我们会发现这么一个需求,新建一个文件夹,然后向文件夹中上传文件,点击文件夹可以直接下载,下载的是一个压缩文件,将文件夹中所有文件全部打包了下载下来. 在python中,我们要做文件打包下载, ...

  9. R语言线性回归

    回归分析是一个广泛使用的统计工具,用于建立两个变量之间的关系模型. 这些变量之一称为预测变量,其值通过实验收集. 另一个变量称为响应变量,其值来自预测变量. 在线性回归中,这两个变量通过一个等式相关联 ...

  10. Django 中的Form表单认证

    一.Form表单   1.1 Form的几个功能 验证用户数据(显示错误信息) 初始化页面显示内容 HTML Form提交保留上次提交数据 生成HTML标签   1.2 创建表单类Form 1. 创建 ...