一、原理概述

v-for指令时在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用"就地复用"策略。如果数据项的数据被改变，Vue.js将不再移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并确保它在特定索引下显示已被渲染过的每个元素。

二、基本用法

v-for是Vue.js的循环语句，它的表达式需要结合着in或者of来使用，类似item in items的形式。

（1）v-for循环普通数组

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../vue-2.7.14.js"></script><style>* {margin: 0;padding: 0;}#root {width: 800px;height: 600px;background-color: yellowgreen;margin: 0 auto;text-align: center;padding: 30px;}.basic {margin: 0 auto;border: 1px solid black;}</style>
</head><body><div id="root"><h2>v-for遍历数组</h2><div  class="basic"><p v-for="(item,index) in lists" :key="index">{{index}}------{{item}}</p></div></div><script>const vm = new Vue({el: '#root',data: {lists:["java程序设计","android程序设计","php程序设计","呵呵呵"],},methods: {}})</script>
</body></html>

执行结果：

在表达式中，lists是数组，item是当前一条数据，index代表当前索引值。列表渲染也可以用in来代替of作为分隔符。代码中还有一个key属性，key属性可以提高循环的性能。

（2）v-for循环对象

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../vue-2.7.14.js"></script><style>* {margin: 0;padding: 0;}#root {width: 800px;height: 600px;background-color: yellowgreen;margin: 0 auto;text-align: center;padding: 30px;}.basic {margin: 0 auto;border: 1px solid black;line-height: 30px;}</style>
</head><body><div id="root"><h2>v-for遍历对象</h2><div class="basic"><p v-for="(value,name,index) in car">{{index}}-----{{name}}------{{value}}</p></div></div><script>const vm = new Vue({el: '#root',data: {car: {name: "奥迪a8",color: "黑色",Number: "124215dhsdhsdf"}},methods: {}})</script>
</body></html>

执行结果：

（3）v-for循环对象数组

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../vue-2.7.14.js"></script><style>* {margin: 0;padding: 0;}#root {width: 800px;height: 600px;background-color: yellowgreen;margin: 0 auto;text-align: center;padding: 30px;}.basic {margin: 0 auto;border: 1px solid black;}</style>
</head><body><div id="root"><h2>v-for遍历对象数组</h2><div class="basic"><p v-for="(item,index) in persons">{{index}}-----{{item.id}}-----{{item.name}}-----{{item.age}}</p></div></div><script>const vm = new Vue({el: '#root',data: {persons: [{ id: "0001", name: "张三", age: "18" },{ id: "0002", name: "李四", age: "18" },{ id: "0003", name: "王五", age: "28" }]},methods: {}})</script>
</body></html>

执行结果：

（4）v-for迭代整数

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../vue-2.7.14.js"></script><style>* {margin: 0;padding: 0;}#root {width: 800px;height: 600px;background-color: yellowgreen;margin: 0 auto;text-align: center;padding: 30px;}.basic {margin: 0 auto;border: 1px solid black;}</style>
</head><body><div id="root"><h2>v-for迭代整数</h2><div  class="basic"><p v-for="count of 10">{{count}}</p></div></div><script>const vm = new Vue({el: '#root',})</script>
</body></html>

执行结果：

Vue.js列表渲染指令v-for相关推荐

Vue的列表渲染指令
列表渲染指令 v-for 当需要将一个数组便利或者枚举一个对象循环显示时,就会用到列表渲染指令 v-for. 它的表达式需要结合in 来使用,类似于item in items的形式. <!do ...
Vue.js 列表渲染
用 v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 i ...
js array 添加对象_不可不知的 Vue.js 列表渲染
介绍用 v-for 把一个数组对应为页面上的一组元素 vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑.通常它会和 v-if 配合使用,达到我们所需要的处理逻辑. v-for 的 ...
2，列表渲染指令v-for以及过滤和排序---vue教程
列表渲染指令过滤 v-for的使用遍历数组和对象遍历数组: <ul><li v-for ="(book,index) in books":key=" ...
Vue核心技术-5,列表渲染指令 v-for
一,前言目前对前期目录进行了简单的梳理,周末会找时间调一下顺序, 顺便再补充一下遗漏的知识点,让过度更加平缓一些, 例如前面没有说计算属性,但目前的列表渲染就要用到了...囧在对目录梳理的过程中,发 ...
【Vue】—列表渲染v-for指令
[Vue]-列表渲染v-for指令
Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...

Vue.js列表渲染指令v-for

一、原理概述

二、基本用法

（1）v-for循环普通数组

（2）v-for循环对象

（3）v-for循环对象数组

（4）v-for迭代整数

Vue.js列表渲染指令v-for相关推荐

最新文章

热门文章