5.10v-for

当我们有一组数据需要进行渲染时, 我们就可以使用v-for来完成.

?
?

v-for的语法类似于JavaScript中的for循环.

?
?

格式如下: item in items的形式.

我们来看一个简单的案例:

?
?

如果在遍历的过程中不需要使用索引值

?
?

v-for="movie in movies"

依次从movies中取出movie, 并且在元素的内容中, 我们可以使用Mustache语法, 来使用movie

如果在遍历的过程中, 我们需要拿到元素在数组中的索引值呢?

?
?

语法格式: v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值.

?
?

?
?

v-for可以用户遍历对象:

?
?

比如某个对象中存储着你的个人信息, 我们希望以列表的形式显示出来.

?
?

?
?

?
?

组件的key属性

官方推荐我们在使用v-for时, 给对应的元素或组件添加上一个:key属性.

?
?

为什么需要这个key属性呢(了解)?

?
?

这个其实和Vue的虚拟DOM的Diff算法有关系.

这里我们借用React‘s diff algorithm中的一张图来简单说明一下:

当某一层有很多相同的节点时, 也就是列表节点时, 我们希望插入一个新的节点

?
?

我们希望可以在B和C之间加一个F, Diff算法默认执行起来是这样的.

即把C更新成F, D更新成C, E更新成D, 最后再插入E, 是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一标识

?
?

Diff算法就可以正确的识别此节点

找到正确的位置区插入新的节点.

所以一句话, key的作用主要是为了高效的更新虚拟DOM.

?
?

?
?

?
?

?
?

?
?

?
?

检测数组更新

因为Vue是响应式的, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新.

?
?

Vue中包含了一组观察数组编译的方法, 使用它们改变数组也会触发视图的更新.

能做到响应式的方法(更改了对象之后, 能够重新渲染):

push(): 把元素添加到数组的最后面, 可以添加多个元素.

pop(): 删除数组里最后一个元素

shift(): 删除数组里第一个元素

unshift(): 在数组最前面添加元素, 可以添加多个元素.

splice():

splice(start): 从第start位(包括start)开始删除元素

splice(start, length): 从第start位(包括start)开始删除length个元素

splice(start, length,‘m‘,‘n‘,‘l‘): 从第start位(包括start)开始删除length个元素, 并添加‘m‘,‘n‘,‘l‘在后面.

sort()

reverse()

还有一个vue的响应式方法: Vue.set(要修改的对象, 索引值, 要修改的值)

?
?

?
?

?
?

?
?

?
?

注:通过索引值修改数组中的元素不是响应式的

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>v-for</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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删除元素之后的渲染机制: 删除一个就好, 如果不刷新, 就不重新渲染;页面上展示的是渲染之后的虚拟dom, 在第二种机制中,

我们把虚拟dom中所删除元素的索引传回给vue, 让vue对dom进行操作, 删除元素, 所以在这个过程中, 需要绑定key, 传key回给vue. 建议v-for都使用:key机制-->

<!--假如v-for有问题, 那么就应该要使用:key对元素进行标识-->

<p v-for="item in list" :key="item.id">

<input type="checkbox">

id:{{item.id}}---name:{{item.name}}


</p>

</div>

<script>

var vm = new Vue({

el: ‘#app‘,

data: {

list: [

{id: 1, name: ‘李斯‘},

{id: 2, name: ‘赵正‘},

{id: 3, name: ‘赵高‘},

{id: 4, name: ‘韩非‘},

{id: 5, name: ‘荀子‘},

]

},

methods: {

//添加方法

add(){

//push添加在最后面

/*this.list.push({id: this.id, name: this.name});*/

//unshift添加在最前面

this.list.unshift({id: this.id, name: this.name});

}

}

});

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/edfg/p/12708376.html

时间: 04-15

5.10v-for的相关文章

桥堆的参数选择以及滤波电容的选择

1.桥堆的参数选择: 2.滤波电容选择:对于整流电压的输出电压大小,大家一定不陌生.很多人会说,输出平均值全波0.9倍,半波0.45倍的交流有效.但是在设计中,我们常常发现一个事实,例如在半波整流后,输出电压得到的不止0.45倍,9V交流整流后可能有11-12V.之前我一直很困惑,是我记错了计算倍数吗?翻了很多书籍,公式当然是没错的.那到底怎么回事? 可能之前我们在学校学这个方面知识点的时候太过注重整流电路,而忽略了脉动比的概念,所以造成我们现在很多人对这一简单的知识不是很清晰.其实这里是由于整

微机主板维修思路

微机主板维修思路 开机:(不开机就是CPU不工作) 查找步骤:先查信号再查阻值. 1.供电 (跳线超频就是改变CPU工作电压). 〈1〉CPU供电(1.5V) 插上负载看1.5V有无--无,看三极管的三种供电(一种5V,另外两面三种是电压IC输出给效应管G极的一个4点多伏一个7点多伏的电压)--IC供电(12V/5V)--直接提供电压的电源插座. (如有12V无输出--IC坏输出不是4点多伏和7点伏的电压)--IC坏OR 三极管坏 CPU工作电压低(如电压IC输出是10V--3极管坏OR 开路.

使用Proxmark3进行MIFARE Classic卡的安全测试

Proxmark3的MIFARE安全测试是很多朋友都非常重视的一部分,所以我们特地以这个部分进行介绍,告诉大家如何当你完成前期操作之后,进行MIFARE CLassic卡类的安全测试操作. 首先,我们要把高频天线连接到Proxmark3的天线接口.当我们连接完成之后,我们就需要查看一下天线与Proxmark3是否连接正常并且正常电压为多少? 命令:hw tune 这个命令大概需要几秒的时间进行回显 有些朋友会问,当我输入完hw tune之后,是不是接下来就是输入hf tune呢? 我个人认为当你

【java学习】进制

目录结构: contents structure [-] 为什么计算机代码需要2进制表示 原码.反码和补码的关系 为什么需要反码.补码 进制的转化 十进制和二进制的相互转化 八进制和二进制的相互转化 十六进制和二进制的相互转化 一个字节能够表示的数据范围 1,为什么计算机代码需要用2进制表示 大家都知道我们熟练的机制是十进制,也就是(0到9),逢10进1.如果要让电脑使用十进制,首先,应该让电脑能够识别出10个数字.通常的考虑是,通过元器件中电压的高低水平来分别标识10个数字.假如最高电压为10

以太网进化历程半景-从10Mbps到1Tbps

继Netfilter conntrack,Linux Bridge之后又是一个半景,依然如故,我不会在文中罗列技术规范和细节,仅仅是希望本文可以帮助人们理解以太网到底是什么,为什么如此成功. 0.动机,愿景以及声明 前端时间帮朋友解决一个编码问题,碰到了全双工这个概念,正好写了一个程序,实现了类似CDMA那种沃尔什编码,即从一个混合信号中分离中自己要的那部分,然而代码是好写的,往线缆上一放就全乱了,这是电学原理导致的.就这么说吧,请看下图: 请问P点的电压是多少?很简单的一个问题,是不是?是的.

直流电机基本系统模型PLECS仿真结果

一.直流电机基本系统模型 二.参数设置与仿真结果 1. 设定外源电压为100V(step time设为0.25),改变串联阻值: (1)R1=0Ω时: (2)R1=10Ω时: (3)R1=100Ω时: (4)R1=1000Ω时,系统报错. 2. 设定串联电阻阻值为10Ω(step time设为0.25),改变外源电压 (1)V=0V时, (2)V=100V时, (3)V=1000V时, (4)V=10000V时, (5)V=100000V时,系统报错. 三.疑点与问题 1.串联阻值以及外源电压的

单片机中去耦电容的使用

起首来看图 3-1,这是上节课曾经见过的 USB 接口和供电电路. 图 3-1  USB 接口和供电电路 右边这张图,过了保险丝今后,接了一个 470uF 的电容 C16,左边这张图,经由开关后,接了一个 100uF 的电容 C19,而且并联了一个 0.1uF 的电容 C10.个中 C16 和 C19 起到的感化是一样的,C10 的感化和他们两个纷歧样,我们先来引见这 2 个大一点的电容.容值比拟大的电容,实际上可以了解成水缸或许水池子,同时,人人可以直接把电流了解成水流,其实大天然万物的道理多

C#写电机驱动程序

前几天实验室做关于电机驱动的实验,用C#写的控制程序 程序如下: 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using System.Drawing; 6 using System.Linq; 7 using System.Text; 8 using System.Threading.Tasks; 9 using System.

autoLayout (相对布局)1()

// //  ViewController.m //  UI-AutoLayout // //  Created by Bruce on 15/9/6. //  Copyright (c) 2015年 Bruce. All rights reserved. // /*  frame  原点  自身的尺寸 来确定 自身位置    autoLayout  根据参照视图的位置  来定义自己的位置      autoLayout相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置    //  

Tracking Boost Regulator TYPICAL 5V REGULATION WITH BOOST CONVERTER AND LDO

Cs5171: Tracking Boost Regulator Adding a current mirror circuit to a typical boost circuit allows the user to select the amount of boost voltage and ensure a constant difference between input and output voltage. This is useful for high side drive ap