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