18 v-for中使用v-if结合template标签的使用

灰太狼 2023-10-06 20:32 11阅读 0赞

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

*  v-for循环数字
 *  v-for中如何使用判断
 *  template 标签的使用

## v-for循环数字 ##

v-for是可以用来循环数字的，比如你要循环1-99的数字，可以直接写成下面的样子。

<span v-for="count in 99">{
        {
        count}},</span>

这样就可以快速的循环出1-99的值在页面上。可以在浏览器中看一下这个效果。

![在这里插入图片描述][15deea531ba04132b514311fb3519d4a.png]

## 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>`

![在这里插入图片描述][64995fb233764c7fbf4ef85fe01053c7.png]

这时候到浏览器中预览，初级项如愿以偿的消失了。

## template 标签的使用 ##

上面的结果完美吗？  
当你打开浏览器的控制台，看Elements选项卡时，你会发现DOM结构是有问题的，明明循环出两项，却有3个`<div>`，而且这种外层套用`<div>`里边使用`<li>`的形式，不符合HTML语法的基本结构。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
为了解决这个问题，Vue给我们提供了`<template>`模版标签，也就是一个空的占位符，目的就是解决模板中为完成业务逻辑，而使用的无用html标签的现象。

现在可以把上面的代码写成这样。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
这时候再到浏览器看一下结果，这样就符合我们的期待的样子了。

到这也基本讲完了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>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

[15deea531ba04132b514311fb3519d4a.png]: https://img-blog.csdnimg.cn/15deea531ba04132b514311fb3519d4a.png
[64995fb233764c7fbf4ef85fe01053c7.png]: https://img-blog.csdnimg.cn/64995fb233764c7fbf4ef85fe01053c7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/be24a295dd654ab3893ea19c1e0c24c1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/fe287e7a01314c6da60e68e89c6ed9ed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4f93513e1bd044e090a71f145f318933.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16