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. 迭代数字（起始值从1开始）

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

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

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

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

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

Vue学习笔记【9】——Vue指令之v-for和key属性的更多相关文章

  1. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  2. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  3. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  4. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  5. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  6. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  7. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

  8. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  9. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  10. Vue学习笔记之Vue的使用

    0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

随机推荐

  1. JavaSE---多线程---线程的控制

    1.Java提供了一些工具方法,可以便捷控制线程的执行: 1.1 join Thread提供了让一个线程等待另一个线程执行完成的方法:join: 当某个程序的执行流中调用其他线程的join方法,该线程 ...

  2. 纯js的右下角弹窗

    <html> <head> <title></title> <meta charset="UTF-8"> <scr ...

  3. 04-树5 Root of AVL Tree（25 分）

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  4. c++ 获取文件图标，类型名称，属性 SHGetFileInfo

    SHGetFileInfo是一个相当实用的Windows API函数. // [MoreWindows工作笔记4] 获取文件图标,类型名称,属性 SHGetFileInfo #include < ...

  5. 68、Schema的相关类

    public class SObjectSchema { public void testSchema(){ //获取SObject的token //1.先获取所有token,然后通过key获取需要的 ...

  6. 基于nodejs的一个实时markdown转html工具小程序

    1.版本一 - 1.1`npm install marked --save` 安装markdwon转html的包.- 1.2 使用watchFile监视 markdown文件 /** * Create ...

  7. 用processing画李萨如曲线

    李萨如曲线 有没有对示波器上变化曲线产生过兴趣,它叫做李萨如曲线: 数学上,利萨茹(Lissajous)曲线(又称利萨茹图形.李萨如图形或鲍迪奇(Bowditch)曲线)是两个沿着互相垂直方向的正弦振 ...

  8. Find a Way (双bfs)

    Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...

  9. upc组队赛7 Slimming Plan

    Slimming Plan 题目描述 Chokudai loves eating so much. However, his doctor Akensho told him that he was o ...

  10. 在响应式布局中，碰到图片不会自动缩放，因此需要一段js脚本

    <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...