Vue指令之`v-for`和`key`属性
2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。
注意：
v-for 循环普通数组
<body>
<!-- v-for 循环普通的数组 和使用foreach 挺像 --> <div class="box">
<p v-for="(item,i) in list">索引值：{{i}}----------值：{{item}}</p>
</div> <script src="./lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
list:[
1,2,3,4,5,6
]
}
}); </script>
</body>
v-for循环对象数组
<body>
<div class="box">
<p v-cloak v-for="(user,i) in list">id：{{user.id}}---------名称：{{user.name}}</p>
</div> <script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
list:[
{id:1,name:'杜伟'},
{id:2,name:'王玥'},
{id:3,name:'任凯'},
{id:4,name:'刘海波'}
]
},
methods:{ } });
</script>
</body>
v-for 循环对象
<body>
<div class="box">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(item,i) in pipor">{{item}}----{{val}}-----{{i}}</p>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
pipor:{
id:1,
name:'杜伟',
gender:'男'
}
}
});
</script>
v-for 迭代数字
<body>
<div class="box">
<p v-for="item in 10" v-text="item"> </p>
</div> <script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{ }
});
</script>
</body>
Key
*跟踪每个节点的身份，从而重用和重新排序现有的元素
*理想的key值是每项都有的且唯一的id。data.id
数组更新检测
使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() revrse()
Vue指令之`v-for`和`key`属性的更多相关文章
- Vue学习笔记【9】——Vue指令之v-for和key属性
迭代数组(普通数组.对象数组) <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name ...
- Vue的Key属性，v-for和v-if，v-if/v-show，v-pre不渲染，v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- VUE router-view key 属性解释
router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...
- vue v-for循环中key属性的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 指令篇 案例(输入提交显示 提交数据_列表)
一.文本操作指令 //1.v-text <p v-text="msg"></p> 等价于 <p>{{msg}}</p> //2.v- ...
- vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- [Vue] : Vue指令
Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...
随机推荐
- Python记录-python执行shell命令
# coding=UTF-8 import os def distcp(): nncheck = os.system('lsof -i:8020') dncheck = os.system('lsof ...
- Jmeter性能测试实战教程系列-搭建分布式性能测试环境(五)
Jmeter 是java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起JAVA内存溢出错误.为了让jmeter工具 ...
- Linq中demo,用力看看吧
本文导读:LINQ to SQL全称基于关系数据的.NET语言集成查询,用于以对象形式管理关系数据,并提供了丰富的查询功能.Linq中where查询与SQL命令中的Where作用相似,都是起到范围限定 ...
- 支持“ReportDbContext”上下文的模型已在数据库创建后发生更改
支持“ReportDbContext”上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkI ...
- 自组织特征映射神经网络（SOFM）
1981年芬兰 Helsink 大学的 T·Kohonen 教授提出一种自组织特征映射网 (Self-Organizing Feature Map , SOFM ), 又称 Kohonen 网 . K ...
- 史上最浅显易懂的RxJava入门教程
RxJava是一个神奇的框架,用法很简单,但内部实现有点复杂,代码逻辑有点绕.我读源码时,确实有点似懂非懂的感觉.网上关于RxJava源码分析的文章,源码贴了一大堆,代码逻辑绕来绕去的,让人看得云里雾 ...
- Java：session中的invalidate()的作用是什么呢？求解
手工杀会话.会话失效有2种可能:超时和手工杀会话.手工杀方便省时间,程序员都爱用. 比如我做一个程序需要登录,中间访问的页面有会话控制,如果没有登录则跳转到登录页面,退出时清会话信息. 这是有两个选择 ...
- 使用 Vagrant + VirtualBox 快速构建 CentOS 下的 Docker 环境
Vagrant - 基础概念: Vagrant 是什么? Vagrant是一款用于在单个工作流程中构建和管理虚拟机环境的工具.凭借易于使用的工作流程和专注于自动化,Vagrant降低了开发环境设置时间 ...
- 剑指offer66：机器人的运动范围
1 题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器 ...
- Linux基础-06-vi编辑器
1. vi编辑器简介 1) vi的定义:vi是一个UNIX和Linux系统内嵌的标准正文(文字)编辑器,它是一种交互类型的正文编辑器,它可以用来创建和修改正文文件. 2. vi编辑器的操作模式 vi编 ...