Vue学习笔记之07-v-for循环遍历

v-for循环遍历数组

v-for循环遍历一个数组, 没有使用索引值(下标值) v-for=“item in arr”
v-for循环遍历一个数组, 使用索引值(下标值) v-for="(item, index) in arr"

<div id="app"><!-- v-for循环遍历一个数组, 没有使用索引值(下标值) --><ul><li v-for="item in names">{{item}}</li></ul><!-- v-for循环遍历一个数组, 使用索引值(下标值) --><ul><li v-for="(item,index) in names">{{index}} {{item}}</li></ul></div><script>const app = new Vue({el: "#app",data: {names: ["xiaoLam", "kobe", "jams", "copo"]}})</script>

v-for循环遍历对象

v-for=“value in obj” 遍历obj对象中的值value
v-for="(value,key) in obj" 遍历obj对象中的值value和键key
v-for="(value, key, index) in obj" 遍历obj对象中的值value和键key和下标index(很少用)

<div id="app"><!-- v-for="value in obj" 遍历obj对象中的值value --><ul><li v-for="value in obj">{{value}}</li></ul><!-- v-for="(value,key) in obj" 遍历obj对象中的值value和键key --><ul><li v-for="(value,key) in obj">{{value}},{{key}}</li></ul><!-- v-for="(value, key, index) in obj" 遍历obj对象中的值value和键key和下标index(很少用) --><ul><li v-for="(value, key, index) in obj">{{value}}, {{key}}, {{index}}</li></ul></div><script>const app = new Vue({el: "#app",data: {obj: {name: "xiaoLam",age: 18,tall: 1.70}}})</script>

组件的key属性

官方推荐在使用v-for的时候, 给对应的元素添加一个 :key 属性
key属性是Vue的虚拟DOM的Diff算法中用来识别元素唯一性的属性
添加这个 :key属性的好处
- 这个其实和Vue的虚拟DOM的Diff算法有关系
- 当某一层有很多相同的节点时, 也就是列表节点时,当我们希望插入一个新的节点时, 比如希望在B和C之间插入一个F, Diff算法默认的做法时这样的: 把C更新为F, 把D更新为C, 把E更新为D, 最后再插入一个E, 这样的做法效率时很低的
所以我们需要使用key来给每个节点做一个唯一的标识
- Diff算法就可以正确地识别这个节点
- 然后找到正确地位置区插入新的节点
一句话, key地作用主要就是为了高效地更新虚拟DOM
:key一定要写入唯一的, 能对应标签的值, 否则没有意义

Vue学习笔记之07-v-for循环遍历相关推荐

day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）
菜鸟Vue学习笔记(四) 上周学习了使用Vue来操作表单元素进行数据双向绑定,今天我们来学习下Vue中的组件,Vue中的组件作用就是去封装一些常用的页面标签,将其当做一个整体,以便在其他位置直接使用一 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记1-什么是Vue
Vue学习笔记1-什么是Vue 一.什么是 Vue? 渐进式 JavaScript 框架,一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架. Vue (发音为 /vjuː/,类似 vie ...
Vue学习笔记---------Vue2
Vue学习笔记---------Vue2 1. Hello,world! 插值语法: 用 {{ xxx }} 插入一个值 ,该值在data中自定义内容. <body><div id= ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...

Vue学习笔记之07-v-for循环遍历

v-for循环遍历数组

v-for循环遍历对象

组件的key属性

Vue学习笔记之07-v-for循环遍历相关推荐

最新文章

热门文章