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语法的基本结构。

template标签的使用

为了解决这个问题,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:[email protected]"></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>
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 18. [基础]v-for列表循环详细讲解-2

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们