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 属性。

遍历数组

<!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>

数组对象

<!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>

循环对象

<!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>

数字

<!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>

数字遍历从1开始

v-for循环的时候，key属性只能使用number获取string

key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须使用v-for的同时，指定唯一的字符串/数字类型：key值

<!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">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
    <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
    <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>
</body>

</html>

　　

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1w2zuib4s8tz5

vuejs基础-v-for用法的更多相关文章

  1. EasyUI中Base(基础)的基本用法

    EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...

  2. scrapy之基础概念与用法

    scrapy之基础概念与用法 框架 所谓的框架就是一个项目的半成品.也可以说成是一个已经被集成了各种功能(高性能异步下载.队列.分布式.解析.持久化等)的具有很强通用性的项目模板. 安装 Linux: ...

  3. shell中echo基础及高级用法详解-渐入佳境

    --作者:飞翔的小胖猪 --创建时间:2021年2月19日 1.1 基础用法 echo命令用来输出文本,在shell脚本中用来输出提示信息用的比较多. 单引号:原样输出所有的内容,不用转义就能输出特殊 ...

  4. mysql CASE WHEN的基础和多种用法

    CASE计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以确定结果. CASE 搜索函数计算一组布尔表达式以确定结果. 两 ...

  5. awk基础01-基本用法

    什么是awk     awk 是一门解释型的编程语言,支持条件判断,数组.循环等功能.可用于文本处理.输出格式化的文本信息.执行数学运算.字符串等操作.     awk在处理文件时按行进行逐行处理,即 ...

  6. vuejs 基础总结（one）

    vuejs 入门知识点 1.active-class 是哪个组件的属性?嵌套路由怎么定义 (1).active-class 是 vue-router 模块的 router-link 组件的属性 (2) ...

  7. vue面试题整理vuejs基础知识整理

    初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...

  8. 1、vueJs基础知识01

    vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...

  9. vuejs基础-常见指令(基本结构、v-cloak、v-text、v-html、v-bind、v-model\v-if、v-show)

    Vue之 - 基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. Knight Moves （双向bfs）

    # 10028. 「一本通 1.4 例 3」Knight Moves [题目描述] 编写一个程序,计算一个骑士从棋盘上的一个格子到另一个格子所需的最小步数.骑士一步可以移动到的位置由下图给出. [算法 ...

  2. python 字符串 string模块导入及用法

    字符串也是一个模块,有自己的方法,可以通过模块导入的方式来调用 1,string模块导入 import string 2,  其用法 string.ascii_lowercase string.dig ...

  3. LeetCode102. 二叉树的层次遍历

    102. 二叉树的层次遍历 描述 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 示例 例如,给定二叉树: [3,9,20,null,null,15,7], 3 / ...

  4. AngularJS语法

    1,$scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. $scope是一个对象,有可用的方法和属性. $scope可应用在视图和控制器上.2,所有的 ...

  5. spark浅谈(3):

    一.shuffle操作 1.spark中特定的操作会触发我们都知道的shuffle事件,shuffle是spark进行数据重新分布的机制,这通常涉及跨执行程序和机器来赋值数据,使得混洗称为复杂而且昂贵 ...

  6. Webstorm上已有的本地项目上传到Github

    1.Webstorm左上角File —— Settings—— Github, Auth Type改成password,在Login和Password中输入自己的github账户和密码,点Test测试 ...

  7. windows重装系统之前与之后进行的操作

    1.原系统的备份 避免重装遇到故障无法恢复,给自己留一条后路. 重装系统之前首先进行一次系统备份,我使用的备份软件是dism++,这个软件还可以完成其他的诸如空间回收.系统优化等操作: 软件地址:ht ...

  8. css定位选择兄弟元素，nth-of-type

    <span class="input-group-btn" the-id="num-change"> <button class=" ...

  9. java并发学习第五章--线程中的锁

    一.公平锁与非公平锁 线程所谓的公平,就是指的是线程是否按照锁的申请顺序来获取锁,如果是遵守顺序来获取,这就是个公平锁,反之为非公平锁. 非公平锁的优点在于吞吐量大,但是由于其不是遵循申请锁的顺序来获 ...

  10. BZOJ 3729 GTY的游戏

    伪ETT? 貌似就是Splay维护dfn = = 我们首先观察这个博弈 这个博弈直接%(l+1)应该还是很显然的 因为先手怎么操作后手一定能保证操作总数取到(l+1) 于是就变成阶梯Nim了 因为对于 ...