上篇文章已经对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 语法的基本结构。
![18. [基础]v 1](/d/file/webqianduan/3oolfr4sgl43oolfr4sgl4.png "18. [基础]v 1")
为了解决这个问题，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>