AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

关于Vue2里 v-for和v-if一起用的时候会出现的问题

2024-11-22 7
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了在Vue2中同时使用`v-for`和`v-if`指令时可能出现的问题及解决方案。由于`v-for`的优先级高于`v-if`，导致条件判断在每次循环中执行，可能造成重复渲染。文中通过具体案例展示了问题现象，并提供了两种解决方法：一是调整逻辑，将列表长度小于等于2时清空列表；二是修改条件判断，避免使用`v-else`，确保每个条件独立判断。最后，作者建议使用Vue3以获得更好的性能和体验。

关于Vue2里 v-for和v-if一起用的时候会出现的问题

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

在这里插入图片描述
@[toc]

1.介绍

在vue2里 v-for和v-if一起用会出现一些不可预料的问题,因为v-for的优先级会比v-if要高,所以v-if会在每个for循环里面都会执行,当你需要根据条件渲染文本的时候,文本可能会渲染多次.

在vue2官方文档里面是这样描述这个问题的:

在这里插入图片描述

2.案例

这是我同学在学习vue2过程中遇到的该问题.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #app {
    
                width: 600px;
                margin: auto;
            }
            .tb {
    
                border-collapse: collapse;
            }
            .tb tr th {
    
                color: white;
            }
            .tb tr th,
            .tb tr td {
    
                padding: 5px 40px;
                border: 1px solid #5e5e5e;
                text-align: center;
            }
            .tb tr:nth-child(1) {
    
                background-color: rgb(94, 188, 255);
            }
        </style>
    </head>
    <body>
        <div id="app">
            <table>
                <table class="tb">
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                    <!-- 循环渲染的元素tr -->
                    <tr v-if="list.length > 2" v-for="(item,index) in list" :key="item.id">
                        <td>{
  {index+1}}</td>
                        <td>{
  {item.name}}</td>
                        <td>{
  {item.time}}</td>
                        <td>
                            <button @click="del(item.id)">删除</button>
                        </td>
                    </tr>
                    <tr v-else>
                        <td colspan="4">没有数据咯~</td>
                    </tr>
                </table>
            </table>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
        <script>
            const app = new Vue({
    
                el: "#app",
                data: {
    
                    list: [
                        {
     id: +new Date(), name: "奔驰", time: "2020 - 05 - 01" },
                        {
     id: +new Date() + 1, name: "宝马", time: "2024 - 02 - 09" },
                        {
     id: +new Date() + 2, name: "奥迪", time: "2021 - 08 - 03" },
                    ],
                },
                methods: {
    
                    del(id) {
    
                        this.list = this.list.filter(item => item.id != id);
                    },
                },
            });
        </script>
    </body>
</html>

可以看到模板里面很明显的同时使用了v-for和v-if,但看表面逻辑是没有什么问题的,接下来我们看一下渲染结果和逻辑是否正确.
在这里插入图片描述

逻辑看起来是对的 当list.length > 2时正常显示 当 list.length<=2时显示没有数据咯

但是为什么没有数据咯渲染了两次呢?

要知道这个问题是怎么造成的我们首先要知道vue的渲染逻辑

原理解析

vue的渲染逻辑无非就是 解析#app里面的html模板将它转换为ast语法树 再通过将语法树转换为render函数

render函数里面包含 _v s c _l _m这几个方法

上面的案例编译出来的render函数如下

(function anonymous() {
   
    with (this) {
   
        return _c('div', {
   
            attrs: {
   
                "id": "app"
            }
        }, [_c('table'), _c('table', {
   
            staticClass: "tb"
        }, [_c('tbody', [_m(0), _v(" "), _l((list), function(item, index) {
   
            return (list.length > 2) ? _c('tr', {
   
                key: item.id
            }, [_c('td', [_v(_s(index + 1))]), _v(" "), _c('td', [_v(_s(item.name))]), _v(" "), _c('td', [_v(_s(item.time))]), _v(" "), _c('td', [_c('button', {
   
                on: {
   
                    "click": function($event) {
   
                        return del(item.id)
                    }
                }
            }, [_v("删除")])])]) : _c('tr', [_c('td', {
   
                attrs: {
   
                    "colspan": "4"
                }
            }, [_v("没有数据咯~")])])
        })], 2)])])
    }
}
)
  • _v:创建文本节点
  • _s:替换变量为一个文本,变量的值从Vue里面的data对象拿
  • _c:创建一个dom节点
  • _l:v-for的实现
  • _m:标识静态render函数,静态render就是渲染时没用到动态数据的 所以渲染结果永远不会变

可以看到,因为v-for的优先级比v-if高 所以就算list.length <= 2 了 v-for还是会循环两次 而不是直接进入v-for在这里插入图片描述

所以v-else里面的内容会渲染两次

这样上面的渲染结果就说的通了,那该怎么解决这种问题呢?

解决办法1

上面的逻辑无非就是在list.length小于等于2的时候显示没有数据咯 那我们就不要在模板里面编写逻辑 在del方法里面编写逻辑 当list.length小于等于2的时候直接把list清空 然后没有数据咯的显示条件就是list.length === 0.

代码实现:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #app {
    
                width: 600px;
                margin: auto;
            }
            .tb {
    
                border-collapse: collapse;
            }
            .tb tr th {
    
                color: white;
            }
            .tb tr th,
            .tb tr td {
    
                padding: 5px 40px;
                border: 1px solid #5e5e5e;
                text-align: center;
            }
            .tb tr:nth-child(1) {
    
                background-color: rgb(94, 188, 255);
            }
        </style>
    </head>
    <body>
        <div id="app">
            <table>
                <table class="tb">
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                    <!-- 循环渲染的元素tr -->
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td>{
  {index+1}}</td>
                        <td>{
  {item.name}}</td>
                        <td>{
  {item.time}}</td>
                        <td>
                            <button @click="del(item.id)">删除</button>
                        </td>
                    </tr>
                    <tr v-if="list.length === 0">
                        <td colspan="4">没有数据咯~</td>
                    </tr>
                </table>
            </table>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
        <script>
            const app = new Vue({
    
                el: "#app",
                data: {
    
                    list: [
                        {
     id: +new Date(), name: "奔驰", time: "2020 - 05 - 01" },
                        {
     id: +new Date() + 1, name: "宝马", time: "2024 - 02 - 09" },
                        {
     id: +new Date() + 2, name: "奥迪", time: "2021 - 08 - 03" },
                    ],
                },
                methods: {
    
                    del(id) {
    
                        this.list = this.list.filter(item => item.id != id);
                        if (this.list.length <= 2) this.list = [];
                    },
                },
            });
        </script>
    </body>
</html>

页面逻辑如下

在这里插入图片描述

可以看到逻辑已经正常了.

解决办法2

仔细看看上面的渲染逻辑 因为v-else只要上面的v-if没成立 就会进入v-else 所以才会渲染两次v-else

所以我们只要把==v-else==改成==v-if=“list.length === 2”== 就可以了, 相当于两个if分开了 这样v-for循环就只会执行一个if而不是第一个if没成立就直接用v-else 这样render函数就会变成:

(function anonymous() {
   
    with (this) {
   
        return _c('div', {
   
            attrs: {
   
                "id": "app"
            }
        }, [_c('table'), _c('table', {
   
            staticClass: "tb"
        }, [_c('tbody', [_m(0), _v(" "), _l((list), function(item, index) {
   
            return (list.length > 2) ? _c('tr', {
   
                key: item.id
            }, [_c('td', [_v(_s(index + 1))]), _v(" "), _c('td', [_v(_s(item.name))]), _v(" "), _c('td', [_v(_s(item.time))]), _v(" "), _c('td', [_c('button', {
   
                on: {
   
                    "click": function($event) {
   
                        return del(item.id)
                    }
                }
            }, [_v("删除")])])]) : _e()
        }), _v(" "), (list.length === 2) ? _c('tr', [_c('td', {
   
            attrs: {
   
                "colspan": "4"
            }
        }, [_v("没有数据咯~")])]) : _e()], 2)])])
    }
}
)

其中_e()是创建一个空文本节点也就是条件不满足的时候渲染一个空节点并把他标识为注释 到时候渲染的时候该节点就会被渲染成一个html注释

3.结语

vue2里面的渲染逻辑还是有些小问题 不过在Vue3里面已经全面修复了并且大幅提升了渲染性能,所以在2024年的今天还是推荐大家使用Vue3

Hi👋,这里是瑞雨溪->一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉

文章标签：
JavaScript
前端开发
C++
游客ady5kpv352g3u
目录
相关文章
弹性计算-百晓生
|
11天前
|
存储 人工智能 弹性计算
阿里云弹性计算_加速计算专场精华概览 | 2024云栖大会回顾
2024年9月19-21日，2024云栖大会在杭州云栖小镇举行，阿里云智能集团资深技术专家、异构计算产品技术负责人王超等多位产品、技术专家，共同带来了题为《AI Infra的前沿技术与应用实践》的专场session。本次专场重点介绍了阿里云AI Infra 产品架构与技术能力，及用户如何使用阿里云灵骏产品进行AI大模型开发、训练和应用。围绕当下大模型训练和推理的技术难点，专家们分享了如何在阿里云上实现稳定、高效、经济的大模型训练，并通过多个客户案例展示了云上大模型训练的显著优势。
弹性计算-百晓生
104483 4
弹性计算-百晓生
|
14天前
|
存储 人工智能 调度
阿里云吴结生：高性能计算持续创新，响应数据+AI时代的多元化负载需求
在数字化转型的大潮中，每家公司都在积极探索如何利用数据驱动业务增长，而AI技术的快速发展更是加速了这一进程。
弹性计算-百晓生
119891 8
周周的奇妙编程
|
6天前
|
并行计算 前端开发 物联网
全网首发！真·从0到1！万字长文带你入门Qwen2.5-Coder——介绍、体验、本地部署及简单微调
2024年11月12日，阿里云通义大模型团队正式开源通义千问代码模型全系列，包括6款Qwen2.5-Coder模型，每个规模包含Base和Instruct两个版本。其中32B尺寸的旗舰代码模型在多项基准评测中取得开源最佳成绩，成为全球最强开源代码模型，多项关键能力超越GPT-4o。Qwen2.5-Coder具备强大、多样和实用等优点，通过持续训练，结合源代码、文本代码混合数据及合成数据，显著提升了代码生成、推理和修复等核心任务的性能。此外，该模型还支持多种编程语言，并在人类偏好对齐方面表现出色。本文为周周的奇妙编程原创，阿里云社区首发，未经同意不得转载。
周周的奇妙编程
9368 6
周周的奇妙编程
|
11天前
|
人工智能 运维 双11
2024阿里云双十一云资源购买指南（纯客观，无广）
2024年双十一，阿里云推出多项重磅优惠，特别针对新迁入云的企业和初创公司提供丰厚补贴。其中，36元一年的轻量应用服务器、1.95元/小时的16核60GB A10卡以及1元购域名等产品尤为值得关注。这些产品不仅价格亲民，还提供了丰富的功能和服务，非常适合个人开发者、学生及中小企业快速上手和部署应用。
周周的奇妙编程
5472 11
阿里云云原生
|
6天前
|
人工智能 自然语言处理 前端开发
用通义灵码，从 0 开始打造一个完整APP，无需编程经验就可以完成
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI，再配合简单易懂的方法，只要你会打字，就能真正做出一个完整的应用。本教程完全免费，而且为大家准备了 100 个降噪蓝牙耳机，送给前 100 个完成的粉丝。获奖的方式非常简单，只要你跟着教程完成第一课的内容就能获得。
阿里云云原生
511 4
云安全专家
|
1天前
|
云安全 存储 弹性计算
三大能力｜构建云上全流量威胁检测新视角
云上全流量安全管控
云安全专家
602 3
申公豹
|
22天前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理：合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等，解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester，百宝箱提升了文档处理的效率和精确度，适用于多种文档格式和语言环境，助力企业实现高效的信息管理和业务支持。
申公豹
3965 5
从数据提取到管理：合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
沃通WoTrus
|
11天前
|
算法 安全 网络安全
阿里云SSL证书双11精选，WoSign SSL国产证书优惠
2024阿里云11.11金秋云创季活动火热进行中，活动月期间（2024年11月01日至11月30日）通过折扣、叠加优惠券等多种方式，阿里云WoSign SSL证书实现优惠价格新低，DV SSL证书220元/年起，助力中小企业轻松实现HTTPS加密，保障数据传输安全。
沃通WoTrus
534 3
阿里云SSL证书双11精选，WoSign SSL国产证书优惠
ModelScope内容运营小助手
|
10天前
|
数据采集 人工智能 API
Qwen2.5-Coder深夜开源炸场，Prompt编程的时代来了！
通义千问团队开源「强大」、「多样」、「实用」的 Qwen2.5-Coder 全系列，致力于持续推动 Open Code LLMs 的发展。
ModelScope内容运营小助手
473 2
沃通WoTrus
|
17天前
|
安全 数据建模 网络安全
2024阿里云双11，WoSign SSL证书优惠券使用攻略
2024阿里云“11.11金秋云创季”活动主会场，阿里云用户通过完成个人或企业实名认证，可以领取不同额度的满减优惠券，叠加折扣优惠。用户购买WoSign SSL证书，如何叠加才能更加优惠呢？
沃通WoTrus
998 3