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="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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章