18. [基础]v-for列表循环详细讲解-2

目录
文章目录隐藏
  1. v-for 循环数字
  2. v-for 中如何使用判断
  3. template 标签的使用

上篇文章已经对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://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>

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 18. [基础]v-for列表循环详细讲解-2

发表回复