码云 18. [基础]v-for列表循环详细讲解-2
上篇文章已经对v-for的使用有了基本的了解，这篇文章主要讲v-for中的三个注意点。
v-for 循环数字
复制Demo17.html的内容到Demo18.html中，然后继续接着上篇文章编写代码。
v-for是可以用来循环数字的，比如你要循环 1-99 的数字，可以直接写成下面的样子。
<span v-for="count in 99">{{count}},</span>
这样就可以快速的循环出 1-99 的值在页面上。可以在浏览器中看一下这个效果。
v-for 中如何使用判断
你看一下，上篇文章写的关于数组循环的小例子，现在的新需求有些变化，由于公司不想招初级前端工程师了，我们想刨除出去，只显示中级和高级。这时候你很可能把代码写成这个样子。
<ul>
<li
v-for="(item,index) in listArray"
:key="index+item"
v-if="item != '初级'"
>
[{{index}}]{{item}}
</li>
</ul>
在浏览器中进行预览，你会发现初级的循环项，并没有消失。这是为什么呢？因为 v-for 循环的优先级要高于v-if判断的优先级，所以判断失效。
正确的写法应该是在<li>外层独立出一个标签，在<li>上做循环。比如写成下面的代码。
<ul>
<div
v-for="(item,index) in listArray"
:key="index+item"
>
<li v-if="item != '初级'">
[{{index}}]{{item}}
</li>
</div>
</ul>
这时候到浏览器中预览，初级项如愿以偿的消失了。
template 标签的使用
上面的结果完美吗？当你打开浏览器的控制台，看 Elements 选项卡时，你会发现 DOM 结构是有问题的，明明循环出两项，却有 3 个<div>，而且这种外层套用<div>里边使用<li>的形式，不符合 HTML 语法的基本结构。
为了解决这个问题，Vue 给我们提供了<template>模版标签，也就是一个空的占位符，目的就是解决模板中为完成业务逻辑，而使用的无用 html 标签的现象。
现在可以把上面的代码写成这样。
<ul>
<template
v-for="(item,index) in listArray"
:key="index+item"
>
<li v-if="item != '初级'">
[{{index}}]{{item}}
</li>
</template>
</ul>
这时候再到浏览器看一下结果，这样就符合我们的期待的样子了。
<ul>
<!--v-if-->
<li>...</li>
<li>...</li>
</ul>
以上就是本文的所有内容了，希望大家跟着码云笔记动手敲一敲，到这也基本讲完了 vue3 中对于列表循环的基本操作和一些小坑，希望对大家有帮助。
为了方便大家学习，附上本文所有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
listArray: [
'初级',
'中级',
'高级'
],
listObject:{
DogOne:'黑背',
DogTwo:'泰迪',
DogThree:'金毛'
}
}
},
methods:{
handleChangeBtnClick(){
this.listArray.push('mybj123.com')
},
},
template: `
<ul>
<template
v-for="(item,index) in listArray"
:key="index+item">
<li v-if="item != '初级'">
[{{index}}]{{item}}
</li>
</template>
</ul>
<button @click="handleChangeBtnClick">点我改变</button>
<ul>
<li v-for="(value,key,index) in listObject" :key="key">
[{{index}}]{{value}}-{{key}}
</li>
</ul>
<span v-for="count in 99">{{count}},</span>
`
})
const vm = app.mount("#app")
</script>
</html>
以上关于18. [基础]v-for列表循环详细讲解-2的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 18. [基础]v-for列表循环详细讲解-2
