黑马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. luogu P3750 [六省联考2017]分手是祝愿

    luogu loj 可以发现在最优策略中,每种操作最多只会做一次,并且操作的先后顺序并不会影响答案,所以考虑从后往前扫,碰到一个\(1\)就对这个位置\(i\)进行操作,这样的操作一定是最优策略.记最 ...

  2. bootstrap-table的简单使用

    先上效果图: 第一步:引用bootstrap-table的样式和js. @Styles.Render("~/assets/css/bootstrap.css") @Styles.R ...

  3. CSS用户界面样式之cursor/outline/resize

    1. 鼠标样式cursor 检测鼠标指针在对象上移动的鼠标指针采用何种系统预定于的光标形状 常用属性: default 小白 hands小手 /pointer move移动 text文本 2. 轮廓 ...

  4. footer始终在页面最底部的方法（问题待检验）

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  5. C和指针--编程题9.14第10小题--判断回文函数

    题目: 编写函数 int palindrom( char *string); 如果参数字符串是个回文,函数就返回真,否则就返回假.回文就是指一个字符串从左向右读和从右向左读是一样的.函数应忽略所有的非 ...

  6. 解决故障码400，“”The plain HTTP request was sent to HTTPS port“”

    Nginx HTTP服务器的报错"400 Bad Request: The plain HTTP request was sent to HTTPS port",本文将讲解如何解决 ...

  7. printf固定一行打印倒计时的实现

    @2019-07-15 [小记] #include<stdlib.h> #include <stdio.h> #include <time.h> #include ...

  8. 使用python下载图片(福利)

    刚学python 没多久, 代码处处是漏洞,也希望各位大佬理解一下 爬出来的图片... 使用的 是 https://www.tianapi.com/  接口下的 美女图片... (需要自己注册一个账号 ...

  9. 命令ls按文件大小来排序

    有时候我们想按照文件的大小来排序,一直忘记,为此特记下如下操作 按照文件所占的大小从大开始排列 # ls -lS total 64 -rw-r--r-- 1 root root 55895 Nov 5 ...

  10. 构建官方example

    开发工具的选择: 构建官方example: