在日常开发中，列表和表格之类需要循环渲染的功能几乎天天都要开发，比如商品列表、数据报表、好友列表都要用到循环
在以前的原生或者jQuery开发中，我们要通过for循环拼接字符串，然后再通过dom操作插入到dom中，拼过的小伙伴都知道多痛苦
现在有了vue，一切都变得很简单，现在咱们就开始学习vue里如果使用循环
比如说现在我们有一个数组，里面有几个超级英雄
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
}
现在我们要把这些超级英雄渲染到一个ul里，显示出来，要用到一个新的指令v-for，其实v-for的语法和js原生的for in语法非常像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 列表循环
const vueApp = Vue.createApp({
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
},
template: `
<ul>
<li v-for="item in list" >{{item}}</li>
</ul>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
item就是循环时数组里的一项，我们把item通过双花括号绑定，显示在li中，打开浏览器就可以看到列表已经渲染出来了
在循环中，我们要拿到索引也是可以的，比如说现在要给超级英雄加上一个序号，就可以使用索引
<ul>
<li v-for="(item,index) in list">这是第{{index+1}}个超级英雄 : {{item}}</li>
</ul>
根据我们程序员的传统，index索引是从0开始的，所以显示的时候我们给它加1，这样显示的就是1 2 3 4了
index在这里可以理解为一个变量，把它的名字换成别的也是可以的，只要写的位置对行了，比如换成i也是一样的
<ul>
<li v-for="(item,i) in list">这是第{{i+1}}个超级英雄 : {{item}}</li>
</ul>
我们仔细观察，发现这个超级英雄列表里有一个跟别人不一样，我们现在决定在页面中不显示他，根据上节课的知识，我们可以使用v-if，于是把代码改成这样
<ul>
<li v-for="(item,i) in list" v-if="item!=='蝙蝠侠'">这是第{{i+1}}个超级英雄 : {{item}}</li>
</ul>
我们用v-if判断，如果当前循环里的这个item不是蝙蝠侠，才显示
打开浏览器发现，没有效果，蝙蝠侠还是显示出来了
因为它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量
那要怎么写呢
我们可以多套一层元素，外层元素上写v-for，内层元素上写v-if
<ul>
<template v-for="(item,i) in list">
<li v-if="item!=='蝙蝠侠'">这是第{{i+1}}个超级英雄 : {{item}}</li>
</template>
</ul>
template可以理解为是一个虚拟标签，我们可以写出来，当做一个div使用，但是vue不会吧template标签渲染到dom里，我们打开开发者工具，发现并没有template这个标签。
这样对于vue来说v-for和v-if没有在一个标签上，所以两个都生效了，我们最后结果就是只显示了三个超级英雄。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 列表循环
const vueApp = Vue.createApp({
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
},
template: `
<ul>
<template v-for="(item,i) in list">
<li v-if="item!=='蝙蝠侠'">这是第{{i+1}}个超级英雄 : {{item}}</li>
</template>
</ul>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
本节教程就到这里，大家要自己动手练一练。
网友评论