vue v-for 和 v-if 、v-else一起使用造成的bug

最新推荐文章于 2023-06-22 18:30:42 发布

weixin_30492601

最新推荐文章于 2023-06-22 18:30:42 发布

阅读量882

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guxuelong/p/9769922.html

本文描述了一个关于Vue.js中v-else指令执行v-for长度次数的现象，并提供了解决方案，即将v-if和v-else提升至template标签的最外层，以避免解析顺序造成的错误。

现象：导致v-else 执行v-for的length次数，

从现象看应该v-for先解析，然后将v-if和v-else包在其中

解决方案：很简单，tempalte 将v-if v-else 隔离到最外层

< v-for>

</template>

</template>

如此就不会有很奇怪的问题了

转载于:https://www.cnblogs.com/guxuelong/p/9769922.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30492601

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue之v-if, v-else, v-show, v-for, v-bind

Bing's Blog

09-11

532

v-if + v-else配合使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...

已处理vue框架 el-dialog标签中 v-dialogDrag属性拖动弹出层拖出窗口bug

weixin_44006009的博客

02-08

837

已处理vue框架 el-dialog标签中 v-dialogDrag属性拖动弹出层出窗口bug

参与评论您还未登录，请先登录后发表或查看评论

v-if和v-else同时显示

Raslirty的博客

06-19

428

解决的话很简单, 中间不要v-if而是v-else-if. 后端习惯了不去用else-if, 比较难看. 前端也这么写结果就出错了.也就是说v-else是一个专情的渣男, 他可以同时看到多个v-else-if但只能盯着一个v-if, 就是离它最近的那个。原因也很简单, v-else是对着上方的v-if来确定自己的条件的所以原来的代码在vue的理解中其实是像这样的。

vue中v-if和v-else同时生效

追求卓越583的博客

01-18

712

vue中v-if和v-else同时生效

v-else中的代码未执行——v-if和v-for在同一结点使用

Annie的博客

06-05

1435

一、现象 v-if和v-else中为结构类似的代码，当判断条件为true时，v-if中的代码正常执行，而当判断条件为false时，v-else中的代码却没有执行。代码如下：二、原因我的v-if和v-else是和v-for一起使用的，此时，v-for的优先级是大于v-if和v-else的。相当于v-if重复运行于每个v-for循环中，v-else同理。所以节点未...

Vue2：v-if、v-for、v-else 的渲染问题

weixin_43932309的博客

10-02

2027

现象：当 v-if和v-for同时使用，且其后紧跟v-else时。v-if条件不满足，v-else循环展示多次（length次）。实际效果等同于：v-for嵌套v-if和v-else。建议：不推荐同时使用 v-if 和 v-for。

v-if,v-else,v-for

qq_42042158的博客

09-25

154

条件判断 v-if,v-else 实现判断代码 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>demo-02</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.

vue.js 的 v-tap 指令.zip

12-01

vue-tap ( 已支持vue2.0，最下面有更新日志 ) vue.js 的 v-tap 指令如何使用例子更新2017.06.17(修复)修复等级父DOM里含有输入法，点击输入无法聚焦的BUG（仅支持vue2以上的版本）vue1.x不再新增特性下一步准备新...

Vue 源码深入解析之扩展、event、 v-model 和 slot

浮生离梦的博客

06-23

1167

一、扩展前面分析了 Vue 的核心以及编译过程，除此之外，Vue 还提供了很多好用的 feature，如 event、v-model、slot、keep-alive、transition 等等。对他们的理解有助于我们在平时开发中更好地应用这些 feature，即使出现 bug 我们也可以很从容地应对。二、event 的理解我们平时开发工作中，处理组件间的通讯，原生的交互，都离不开事件。对于一个组件元素，我们不仅仅可以绑定原生的 DOM 事件，还可以绑定自定义事件，非常灵活和方便。那么接下来我们

Vue 08使用v-model实现计算器

mqingo的博客

01-02

719

08使用v-model实现计算器.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08使用v-model实现计算器</title> <script type="text/javascript&quot

v-else前面有多个v-if

qingzhizhenhun的博客

02-02

2660

v-else是紧跟在v-if后面的,当v-if不执行时,会立即执行,但是前面有多个v-if时,一个v-if不执行,v-else也会立即执行为了解决这种情况,vue提供了v-else-if来添加”else块”<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>

v-for给列表里的指定项单独绑定事件，使用v-if 和v-else配合即可

hbvh1的博客

10-29

541

<div class="icon" v-for="(item,index) in List" :key=""> <router-link :to="item.to"> <el-card style="border-radius: 10px; background: #10001528"> <div class="houiconlist" v-if="index == 7" @click=...

用自己的踩坑经历告诉你 vue2/vue3中v-if和v-for是否能一起使用

weixin_45966674的博客

10-09

762

简单说第一个元素因为v-for遍历的是0 因此没有走循环自然就没有渲染从而没有触发v-if 相当于元素就没写一样而第二个是因为没有v-if判断过啊就好比没有if 哪来的else呢？而这个index是v-for中声明的那就是说 v-for没执行就没有index 而我们v-if 在先执行的情况下去拿这个index判断自然是拿不到就报错了。vue3中 v-if和v-for的优先级发生了转换这次是v-for优先级低于v-if了。

v-if v-else渲染交叉问题

weixin_42823060的博客

07-09

183

v-if v-else渲染交叉问题做项目时遇到一个弹框根据不同类型展现不同内容的情况，因为不想写两个弹框，所以采用v-if和v-else根据类型的不同渲染对应内容。用到的都是table列表，出现了渲染问题点击A按钮点击B按钮发现这两行并没有根据按钮改变渲染解决：可能是Vue识别到的是相似组件（高度相似甚至相同），所以就不会更新元素，所以为其加key值标识就可以了。 <el-table :data="tableData" :height="400" class="mt-2

Vue基本指令v-for,v-show/if,v-else/else-if,v-bind,v-on以及综合业务

HelloWord182的博客

06-29

549

mutache 语法糖基础模板语法 v-for v-for 数组 v-for = " (item,index) in arr " item是arr中每一个元素对象 v-for = "(item,key,index) in obj " item是obj的属性值 json类型数据嵌套类型数据 key: 给没一个循环的列表添加一个唯一的标识使用指...

v-if 和 v-for不能同时使用的原因以及解决方法