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

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

在这里插入图片描述

文章目录

关于Vue2里 v-for和v-if一起用的时候会出现的问题
- 1.介绍
- 2.案例
- - 原理解析
  - 解决办法1
  - 解决办法2
- 3.结语

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)])])}
}
)