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" ...
随机推荐
- 爱心代码_HTML
直接上效果 <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- int 和vachar后面的数字代表的含义
在创建数据表的时候,我们经常会给每一个字段设置一个长度,例如:int(5).varchar(10) 等等,但是他们代表的意思是什么呢?是该列允许存储值的最大宽度吗? 场景1:为什么我设置成 int(1 ...
- train_data
for images, labels in train_data: for images, labels in train_data: img = images[0] img = img.numpy( ...
- ubuntu16.04openssh升级
wget http://zlib.net/zlib-1.2.11.tar.gz tar xf zlib-1.2.11.tar.gz && cd zlib-1.2.11/ ./confi ...
- springMVC的定时器
大家好,本人从事软件行业已有8年,大部分时间从事软件开发编写工作.好了废话少说了哈哈哈,直接干货. 在Java开发过程中有很多业务需求里面需要我们实时处理一些动态的业务比如库存的数据动态更新,实时数据 ...
- Java经典知识复习
1.自增变量 int i = 1; i = i++; int j = i++; int k = i + ++i * i++; 问i.j.k分别等于? 针对这类题目, 1. 赋值操作=,最后计算: ...
- DP-最大子矩阵
1768:最大子矩阵 题目描述: 描述已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩阵比如,如下4 * 4的矩阵 0 -2 -7 09 2 ...
- JS样式获取的封装方法
样式获取 style属性 只能获取标签内容style属性里面存在的一些样式 如果你需要获取对应的全局所有地方设置样式 我们就需要采用一些方法 getComputedStyle 方法属于window的方 ...
- 【git入门】基于阿里云搭建git
本文旨在说明基本的git使用流程,分为以下几个部分: 1.安装git环境 2.注册 3.git基本操作 一.安装git环境 第一次使用git,需要先安装配置git环境,windows版下载地址http ...
- 大胖子走迷宫【spfa跑状态】【到这个点，并且这个胖 = max（到这个点，按照时间变的这个胖）
大胖子走迷宫 题意 思路 普通的bfs走迷宫,多加了一个熟悉,就是胖的圈数.可以来回走,普通的bfs可能不太好处理,我们把这些状态放进spfa跑. 状态定义为{x,y,fat}:坐标位置,胖的圈数. ...