黑马vue---18、v-for指令的四种使用方式

一、总结

一句话总结：

(item, i) in list：什么in什么的形式，前面是各种参数

1、v-for循环普通数组？

<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

list: [1, 2, 3, 4, 5, 6]

2、v-for循环对象数组？

<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>

list: [
    { id: 1, name: 'zs1' },
    { id: 2, name: 'zs2' },
    { id: 3, name: 'zs3' },
    { id: 4, name: 'zs4' }
  ]

3、v-for循环对象？

<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引

user: {
    id: 1,
    name: '托尼·屎大颗',
    gender: '男'
  }

4、v-for迭代数字？

<p v-for="count in 10">这是第 {{ count }} 次循环</p>
注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

二、内容在总结中

1、Vue指令之v-for和key属性

  1. 迭代数组
<ul>

  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>

</ul>
  1. 迭代对象中的属性


	<!-- 循环遍历对象身上的属性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
  1. 迭代数字


<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

 

2、代码

v-for循环普通数组：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- <p>{{list[0]}}</p>

    <p>{{list[1]}}</p>

    <p>{{list[2]}}</p>

    <p>{{list[3]}}</p>

    <p>{{list[4]}}</p> -->

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        list: [1, 2, 3, 4, 5, 6]

      },

      methods: {}

    });

  </script>

</body>

</html>

v-for循环对象数组：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        list: [

          { id: 1, name: 'zs1' },

          { id: 2, name: 'zs2' },

          { id: 3, name: 'zs3' },

          { id: 4, name: 'zs4' }

        ]

      },

      methods: {}

    });

  </script>

</body>

</html>

v-for循环对象：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->

    <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        user: {

          id: 1,

          name: '托尼·屎大颗',

          gender: '男'

        }

      },

      methods: {}

    });

  </script>

</body>

</html>

v-for迭代数字：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 -->

    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->

    <p v-for="count in 10">这是第 {{ count }} 次循环</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {}

    });

  </script>

</body>

</html>
 

黑马vue---18、v-for指令的四种使用方式的更多相关文章

  1. 第二章 Vue快速入门-- 17 v-for指令的四种使用方式

    1.v-for循环普通数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. [转][Android]Android数据的四种存储方式

    android.database.sqlite类 SQLiteQueryBuilder java.lang.Object android.database.sqlite.SQLiteQueryBuil ...

  3. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  4. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File （三） —— SharePreferences

    除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data ...

  5. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File （四） —— ContentProvider

    ContentProvider是安卓平台中,在不同应用程序之间实现数据共享的一种机制.一个应用程序如果需要让别的程序可以操作自己的数据,即可采用这种机制.并且此种方式忽略了底层的数据存储实现,Cont ...

  6. [Android]Android数据的四种存储方式

    存储方式 Android提供以下四种存储方式: SharePreference SQLite File ContentProvider Android系统中数据基本都是私有的,一般存放在“data/d ...

  7. (转)Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File （三） —— SharePreferences

    除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data ...

  8. Map 的四种遍历方式

    Map 的四种遍历方式 import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class ...

  9. UICollectionView基础/UICollectionViewCell的四种创建方式

    前言 UICollectionViewCell的四种创建方式:http://blog.csdn.net/ZC_Huang/article/details/52002302 这个控件,看起来与UITab ...

随机推荐

  1. java实现判定新旧版本号

    废话不多说,直接上代码 /** * 判断是否为最新版本方法 将版本号根据.切分为int数组 比较 * * @param localVersion 本地版本号 * @param onlineVersio ...

  2. 【转】js中的原型

    原文链接:https://blog.csdn.net/u012468376/article/details/53121081 一.什么是原型原型是Javascript中的继承的基础,JavaScrip ...

  3. LED点阵显示

    /*********************************************************** 8*8LED点阵---显示数字实验 实现现象:下载程序后点阵上显示数字0 注意 ...

  4. LINUX 使用grep命令查看某个指定时间段的日志

    今天查看订单重复的问题,由于订单生成已经有一段时间了,所以我必须精准进行日志查询.开始用的是sed 命令查询法,后来改成了grep查询,很方便. 命令: grep '时间' '日志文件名 ' 例如:我 ...

  5. 使用JS和PHP导出table表格

    把table表格的内容导出成excel 或者word等格式(简单容易不需要太多php) 导出需注意 1. 样式都在行间,导出excel表格会继承样式包括colspan.rowspan,非表格元素,样式 ...

  6. 第二章、drf框架 - 请求模块 | 渲染模块 解析模块 | 异常模块 | 响应模块 (详细版)

    目录 drf框架 - 请求模块 | 渲染模块 解析模块 | 异常模块 | 响应模块 Postman接口工具 drf框架 注册rest_framework drf框架风格 drf请求生命周期 请求模块 ...

  7. 《浏览器工作原理与实践》<05>渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？

    在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢?就进入了渲染阶段.这个阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练 ...

  8. h5 特效

    地址:http://www.cnblogs.com/sun927/p/5842852.html 几个别人总结的css3炫酷效果,有需要直接拿来用即可,包括以下几个效果: 1.悬浮时放大 2.悬浮时转一 ...

  9. new函数

    可以通过new函数直接创建一个类型的指针 变量名:=new(Type) 使用new函数创建的指针已有指向,可以使用*指针对象进行赋值. func main() { a := new(int) fmt. ...

  10. [唐胡璐]Selenium技巧- IEDriverServer在进程中没有关闭？

    有时候跑完脚本后，IEDriverServer.exe进程没杀掉。 解决方法： 在关闭driver时用Driver.Quit();不要用Driver.Close();Driver.Quit() Qui ...