黑马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. js的一些兼容融性问题

    1.非行内样式获取 高级浏览器 getComputedStyle(obox.false)//获取所有属性 ie浏览器 box.currentStyle//获取所有属性 兼容写法 function ge ...

  2. 对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能

    在做3000的项目中,因为页面的svg很大,但是做的只是适配电脑,打开肯定是看不全的,要看全就必须进行滚动,可是客户提出了将页面放在电视机上面,用电视输入网址直接访问,这样问题就来了,电视上怎么进行滚 ...

  3. 【转】js原型链与继承

    原文链接:https://blog.csdn.net/u012468376/article/details/53127929 一.继承的概念 ​ 继承是所有的面向对象的语言最重要的特征之一.大部分的o ...

  4. DX使用随记--ImageComboBoxEdit

    1. 增加按钮: Combo_订单类型.Properties.Items.Clear()Select Case Combo_客户名称.EditValue Case "ABC" Co ...

  5. es string 分词完整示例

    "products_name_en": {            "type":  "string", //字符串类型            ...

  6. Django项目实战—用户头像上传

    1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. IDEA 运行报错：WARN: Establishing SSL connection

    使用JDBC连接数据库时出现报错, 报错内容:Wed Sep 26 14:30:31 CST 2018 WARN: Establishing SSL connection without server ...

  8. .net面试题——20190718

    文章:Dapper.Net实现增删改查 autofac automap 异步 委托 依赖注入

  9. linux——系统命令

    (1)   显示系统日期和时间:date 显示系统当前时间 例如:date (1)  切换用户:su 用户名 以其他用户身份使用系统,(类似windows10系统,有些程序以管理员身份执行) ① 从r ...

  10. SqlMetaData异常 dbType xx 对于此构造函数无效。

    今天在dapper中想扩展使用表值类型参数——tableValue.但是dapper不支持此类参数,于是扩展了一下.其中出现了一个问题. Microsoft.SqlServer.Server.SqlM ...