vue之列表渲染v-for
简介
v-for可循环对象：数组，对象，字符串，数字
用法
需要哪个标签循环，就把v-for写到哪个标签上
v-for="xxx in 变量" 这里的xxx in是固定写法，xxx代表一个变量，比如后端的 for i in中的i字母
v-for可循环的几种变量的展示
使用v-for循环“数组，对象，字符串，数字”的方式
数组的循环展示
body:
<h1>数组的循环</h1>
<h3 v-for="i in l1">{{i}}</h3>
<h1>带索引的数组循环</h1>
<span>如果要打印索引，需要把索引变量放后面，如果有多个变量就使用括号括起来，如下：</span>
<h3 v-for="(i, index) in l1">索引{{index}}的数字是：{{i}}</h3>
script:
new Vue({
el: '#app',
data: {
l1: [1, 2, 3],
d1: {name: 'jack', age: 18},
s1: 'hello world',
n1: 5
},
})
显示结果：
对象的循环展示
body:
<h1>对象的循环</h1>
<span>默认打印value值，不打印key值</span>
<h3 v-for="i in d1">{{i}}</h3>
<h1>对象带kv的循环</h1>
<span>key变量放后面，value变量放前面</span>
<h3 v-for="(i,key) in d1">key是：{{key}}，value是：{{i}}</h3>
script:
new Vue({
el: '#app',
data: {
l1: [1, 2, 3],
d1: {name: 'jack', age: 18},
s1: 'hello world',
n1: 5
},
})
字符串的循环展示
body:
<h1>字符串的循环</h1>
<h3 v-for="i in s1">{{i}}</h3>
<h1>字符串的循环，带索引</h1>
<h3 v-for="(i, index) in s1">索引{{index}}的字符是{{i}}</h3>
script:
new Vue({
el: '#app',
data: {
l1: [1, 2, 3],
d1: {name: 'jack', age: 18},
s1: 'hello world',
n1: 5
},
})
数字的循环展示
body:
<h1>循环数字</h1>
<span>n1变量是5,相当于python的for i in range(5)</span>
<h3 v-for="i in n1">{{i}}</h3>
<h1>循环数字，带索引</h1>
<h3 v-for="(i,index) in n1">索引{{index}}的数字{{i}}</h3>
script:
new Vue({
el: '#app',
data: {
l1: [1, 2, 3],
d1: {name: 'jack', age: 18},
s1: 'hello world',
n1: 5
},
})
v-for搭档key值的说明
v-for在使用时，一般会在循环的标签上增加一个 :key="xxx" 的属性，它的作用是加速虚拟dom的替换。
<script>
// 假如有一个列表 l1=[1,2,3]
<div v-for="i in l1">显示</div>
</script>
上面的代码未使用key属性，说明如下：
此时页面渲染出三个div标签来，但如果我们增加了一个值，比如l1变成了l1=[1,2,3,4]，这时vue会把整个页面重新渲染，并加载到页面上。如果我们的代码添加了key属性，如下：
<script>
// 假如有一个列表 l1=[1,2,3]
<div v-for="i in l1" :key={{i}}>显示{{i}}</div>
</script>
此时页面上渲染出三个div标签，如果我们给l1增加一个值，l1=[0,1,2,3,4]后，vue不会重新渲染之前的三个div，只会在对应位置添加一个div标签，这时就节省了很多资源。
js循环几种方式
与vue没有关系
基于索引的循环
<script>
// 基于索引的循环
for (i = 0; i < 5; i++) {
console.log(i)
}
</script>
数组的循环
数组基于索引的循环
<script>
// 数组基于索引的循环
l1 = [3, 4 ,5]
for (i = 0; i < l1.length; i++) {
console.log(l1[i])
}
</script>
数组基于迭代的循环
<script>
// 基于数组的循环
let l1 = [4, 5, 6]
// 注意下面的循环中i是索引，与vue的v-for循环不同v-for="(值, 索引)"
for (i in l1){
console.log(l1[i])
}
</script>
基于of的循环
此语法是es6才有语法，原来都是for i in xxx，这个是for i of xxx，可以直接显示值
<script>
// 基于数组的of的循环
let l1 = [4, 5, 6]
for(i of l1){
console.log('数组的for of 循环：', i)
}
</script>
数组的方法循环
只有数组有这个方法，其它的对象、字符串、数字等都没有此方法，总的来说就是限“数组”
<script>
// 基于数组的循环
let l1 = [4, 5, 6]
l1.forEach(function (i) {
console.log('数组的forEach循环：', i)
})
</script>
jQuery的循环
<script>
// 基于jQuery的循环
let l1 = [4, 5, 6]
// 注意两个变量是索引在前，值在后
$.each(l1, function (index, item) {
console.log('值:', item,'索引:', index)
})
</script>
点击按钮隐藏/显示列表示例
使用v-for循环显示列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="row">
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>测试v-for渲染</h1>
<button @click="handleClick">点我显示</button>
<div v-if="show">
<div class="bs-example" data-example-id="hoverable-table">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th class="text-center">NAME</th>
<th class="text-center">PRICE</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
vm = new Vue({
el: '#app',
data: {
show: false,
good_list: [
{id: 1, name: '塞尔达传说:荒野之息', price: '349'},
{id: 2, name: '塞尔达传说:王国之泪', price: '365'},
{id: 3, name: '对马岛之魂', price: '450'},
{id: 4, name: '战神5:诸神黄昏', price: '459'},
{id: 5, name: '恶魔之魂', price: '420'}
],
},
methods: {
handleClick() {
this.show = !this.show
}
}
})
</script>
</html>
vue之列表渲染v-for的更多相关文章
- 一起学Vue之列表渲染
在Vue开发中,列表数据绑定非常简单易用,本文主要通过一些简单的小例子,讲述v-for的使用方法,仅供学习分享使用,如有不足之处,还请指正. 用 v-for 把一个数组对应为一组元素 我们可以用 v- ...
- vue基础——列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据 ...
- 【03】Vue 之列表渲染及条件渲染
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- vue基础---列表渲染
首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...
- 前端框架之Vue(6)-列表渲染
用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...
- vue之列表渲染
一.v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染. 1.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元 ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 第六十三篇：Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
随机推荐
- Vue实现组件化的基本思路
Vue.js(以下简称Vue)是时下流行的前端开发库,一般搭配其插件Vue-Router,Vuex一起使用,行业中称为Vue全家桶. Vue使用了MVVM的理念,将表现层(DOM)和数据层进行了分离, ...
- Java 中的内存分配
Java 中的内存分配 Java 程序运行时,需要在内存中分配空间.为了提高运算效率,就对空间进行了不同区域的划分,因为每一片区域都有特定的处理数据方式和内存管理方式. 一.栈:储存局部变量 局部变量 ...
- react修改静态文件根目录
.env(项目根目录环境变量文件) PUBLIC_URL:http://cdn.com/
- git commit --amend适用场景详解
适用场景: 场景1.本地开发代码已提交,提交后发现这次提交的代码有问题,或者漏提交了一些文件,此时,希望达到以下目的: ①修改有问题的代码. ②补足漏提交的文件(一般是新增的文件没有git add . ...
- Verilog标识符与关键字
Verilog标识符与关键字 1.标识符: Verilog HDL中的标识符是指用来声明数据,变量,端口,例化名等除关键字外的所有名称的组合.如:input a, 这里a就是一个标识符,用来代表一个输 ...
- linux 学习之xargs
xargs 可以将筛选结果作为执行条件 如 ls *.go | xargs rm -rf 删除当前目前所有后缀为go的文件 指定单行列数 cat test.txt | xargs -n2
- 【Win11】Win11家庭版升级专业版
1.将已激活的Win11家庭版升级成未激活的Win11专业版:输入密钥[BCQNW-3VWYB-4V7QD-M6R2B-7MH26] 2.将未激活的Win11专业版升级成已激活的专业版 :输入密钥[6 ...
- NOIP2009普及组
T3]细胞分裂 [算法]数论 [题解]均分的本质是A整除B,A整除B等价于A的质因数是B的子集. 1.将m1分解质因数,即m1=p1^a1*p2^a2*...*pk^ak 所以M=m1^m2=p1^( ...
- TCP 为什么是 三次 握手 不是两次 不是四次
为什么不是两次 (1) 防止 历史 旧数据 连接 客户端连续发送多次 SYN 建⽴连接的报⽂,在⽹络拥堵等情况下: ● ⼀个「旧 SYN 报⽂」⽐「最新的 SYN 」 报⽂早到达了服务端: ● 那 ...
- ajax的async异步执行属性
遇到了一个ajax,看到了一个属性,async,是用来设置同步执行,或者是异步执行的 举一个例子: $.ajax({ async: false, type : "post", ...