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" ...
随机推荐
- Linux 获取内网IP地址脚本
IP=$( /sbin/ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk '{print $2}'|tr -d "addr: ...
- 安装pytorch时install的packages
- js- throw and try-catch-finally
总结一下: 1.throw 抛出错误 2.在使用try-catch时 try{}抛出错误,catch{}块语句才执行,另外catch(e)可创建例如e的标识符,对try{}块抛出异常进行捕捉 3.在使 ...
- 如何修改被编译后DLL文件 (转发)
我们平时在工作中经常会遇到一些已经被编译后的DLL,而且更加麻烦是没有源代码可以进行修改,只能针对这个DLL的文件进行修改才能得到我们想要的结果:本文将通过一个实例来演示如果完成一个简单的修改;我们将 ...
- Shell写脚本关于ssh执行jar包，需要刷新JDK路径的问题
比如脚本中下面这一段 ssh $i "java -jar /applog/$PROJECT/$APPNAME --server.port=$SERVER_PORT >/dev/null ...
- bootstrap栅格系统，排版，代码，表格表单
一.栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局. 实例: <!DOCTYPE html> <html lang="zh-CN&q ...
- Longest Common Substring（最长公共子串）
SP1811 题目描述 A string is finite sequence of characters over a non-empty finite set Σ. In this problem ...
- logging 模块详解
日志记录函数以它们用来跟踪的事件的级别或严重性命名.下面描述了标准级别及其适用性(从高到低的顺序) 日志等级(level) 描述DEBUG 最详细的日志信息,典型应用场景是 问题诊断INFO 信息详细 ...
- 量化交易-可视化展示(grafana)
先上图 简单的实现了一下,效果还好,可玩性强 大概部署mysql+grafana step 1: 服务器:阿里云,ucloud啥的随意,配置也不需要什么,我的是阿里云1核1GB,足以 我用的ubunt ...
- UG二次开发-内存访问违例
在项目中修改路径参数后重算发生了内存访问违例的错误,经过调试,发现是下面这一行出的错 surfaceContourBuilder1.Commit(); 经过反复调试,发现这个东西不能随便放,不可以想当 ...