[基础]v-for列表循环详细讲解-2
- v-for循环数字
- v-for中如何使用判断
- template 标签的使用
v-for循环数字
v-for是可以用来循环数字的，比如你要循环1-99的数字，可以直接写成下面的样子。
<span v-for="count in 99">{{count}},</span>这样就可以快速的循环出1-99的值在页面上。可以在浏览器中看一下这个效果。
<!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{
}
},
methods:{
},
template:`<span v-for="count in 12">{{count}}<br /></span>`
})
const vm=app.mount("#app")
</script>
</html>
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>上做循环。
比如写成下面的代码。
template:`<ul>
<div v-for="(item,index) in listArray" :key="index+item">
<li v-if="item != '初级'">
[{{index}}]{{item}}
</li>
</div>
</ul>`
<!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:['初级','中级','高级']
}
},
methods:{
},
template:`<ul>
<div v-for="(item,index) in listArray" :key="index+item">
<li v-if="item != '初级'">
[{{index}}]{{item}}
</li>
</div>
</ul>`
})
const vm=app.mount("#app")
</script>
</html>这时候到浏览器中预览，初级项如愿以偿的消失了。
template 标签的使用
上面的结果完美吗？
当你打开浏览器的控制台，看Elements选项卡时，你会发现DOM结构是有问题的，明明循环出两项，却有3个<div>，而且这种外层套用<div>里边使用<li>的形式，不符合HTML语法的基本结构。
为了解决这个问题，Vue给我们提供了<template>模版标签，也就是一个空的占位符，目的就是解决模板中为完成业务逻辑，而使用的无用html标签的现象。
现在可以把上面的代码写成这样。
<!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:['初级','中级','高级']
}
},
methods:{
},
template:`<ul>
<template v-for="(item,index) in listArray" :key="index+item">
<li v-if="item != '初级'">
[{{index}}]{{item}}
</li>
</template>
</ul>`
})
const vm=app.mount("#app")
</script>
</html>
这时候再到浏览器看一下结果，这样就符合我们的期待的样子了。
<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('willem')
},
},
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>
