Vue v-if 动态切换失效，不随函数值变化进行切换

最新推荐文章于 2023-12-20 15:31:46 发布
最新推荐文章于 2023-12-20 15:31:46 发布
阅读量2k 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loney_wolf/article/details/127611834
版权

       如下图，通过v-if对两个table进行展示，隐藏控制。初始化之后，table并没有随着 appearLeader，appearNormal的值变化而进行变化。
       网友给出的原因，可能是Vue识别到是相似组件（高度相似甚至相同）不会更新元素。
       给俩个高度相似的组件分别加上不同的key值让Vue识别为不同的组件。
在v-if 后在绑定一个key ,完美解决 :key=‘normal’ :key=‘leader’

在这里插入图片描述
参考博客：https://blog.csdn.net/weixin_42288182/article/details/108095456?spm=1001.2014.3001.5501

轻点 别打脸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Vue] | 修改data中的值 v-if 不能动态切换, v-if失效
张音乐的博客
07-08 7622
今天在开发过程中, 用的是根据方法名称调用方法, 来控制一个页面中某些部分的显示和隐藏.最后发现在调用方法时, 修改data中的值, 例如下图所示来控制是否显示的时候, 修改后不能动态控制是否显示,最后经过一番排查, 发现,动态调用的时候需要把当前的this传入方法中执行. 如果你也是使用的动态调用, 那就需要注意喽. <template> <div> <div v-if="visible" style="height: 500px;">
对vue中v-if的常见使用方法详解
10-17
今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
v-if为什么会失效，什么情况下会失效
最新发布
m0_61093181的博客
12-20 1445
v-if 是 Vue中的一个指令，用于根据表达式的值的真假来切换元素的显示和隐藏。在大多数情况下，v-if 是可靠的，但是有一些情况下它可能会失效：
vue组件中watch props根据v-if动态判断并挂载DOM的问题
12-29
问题复现：父组件中通过名为 source 的 prop 向子组件 Chart 传入数据 <Chart source=chartData></Chart> import Chart from '../components/Chart' export default { name: 'Home', components: { Chart }, data () { return { chartData: [] } }, mounted () { setTimeout(() => { this.chartData = [ [89.3, 58212,
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用vue-router与v-if实现tab切换遇到的问题及解决方法
10-18
主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下
v-if动态渲染失效？可能是这个原因
m0_71295326的博客
03-10 650
今天在用v-if时想做出点击切换样式的效果，打印结果flag的值会改变但是样式不变 ，检查了好久发现是他的父盒子使用v-mome，被影响了。
v-if失效原因
issa的博客
09-17 2260
一般v-if失效都是和绑定变量有关，我所知道的一般有两种。
【js】解决 v-if “不生效”
weixin_52418790的博客
09-06 5789
v-if = ‘showAnswer’不生效，一直为true
vue对象属性变化时无法刷新v-if、v-show
guanguan0_0的博客
02-15 9347
普通对象赋值方式可能会使v-if和v-show无法刷新，可以使用this.$set(this.obj, 属性名,属性值)的方式来改变对象的值，例子如下： <template> <button @click="handleShow">点击</button> <div v-if="params.isShow">显示出来div<...
vue中v-if不生效
qq_42990319的博客
05-10 2304
vue中v-if在el-table中未生效的原因
vue v-model动态生成详解
08-27
本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码，有兴趣的朋友参考学习下。
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
VUE中V-IF条件判断改变元素的样式操作
12-28
v-if判断后用标签改变样式（特定显示列字体加粗） <v> <template v-for='(col,i) in cols'> <v key='i' v-if='col.text==' xss=removed> <v><b>{{col.text}}</b></v> <v class='align-end mystyle'><b>{{item...
对vue v-if v-else-if v-else 的简单使用详解
12-29
首先vue.js请注意 2.1.0版本以上方可使用v-else-if <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed][removed] </head> <body>...
vue使用el-table在el-table-column下使用v-if改变数据不响应
m0_59290344的博客
09-26 684
vue使用el-table在el-table-column下使用v-if改变数据不响应
vue使用v-if切换tab时echarts不渲染、内存泄露
m0_53470879的博客
11-11 2675
之前自己写tab，出现了很多bug，这里记录一下。 一、v-show 子组件和插件如果放在tab2加载会失效，除非首次加载的时候加载tab2。 转换思路，用v-if。 二、v-if （1）页面切换回去时echarts不会渲染 这时候在切换tab的点击事件中使用$nextTick()回调echarts函数就可以解决问题。 // 切换tab1和tab2 changeTab(active) { this.activeName = active; if (this.activeName ==
【VUE的Form表单】使用v-if切换控件时，表单校验不生效
weixin_55846296的博客
09-29 3197
【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效
解决vue v-if 不重新渲染组件问题
Songywaa的博客
08-19 9397
问题描述： tab切换，发现v-if 的组件并没有销毁掉组件 原因： Vue组件v-if新渲染的组件不更新：可能原因是Vue识别到是相似组件（高度相似甚至相同）不会更新元素。 解决办法： 给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件。 ...
vue v-if用法
12-05
Vue.js中的v-if是一个常用的条件渲染指令，它可以根据表达式的值来动态控制元素的显示或隐藏。具体的使用方法如下： 1. 在元素上使用v-if指令，并将其绑定到一个表达式上，例如： ```html <div v-if="isShow">这是一个被v-if控制的元素</div> ``` 2. 在Vue实例中定义isShow变量，并将其初始化为true或false，例如： ```javascript new Vue({ el: '#app', data: { isShow: true } }) ``` 3. 当isShow的值为true时，该元素会被渲染出来；当isShow的值为false时，该元素会被从DOM中移除。 需要注意的是，v-if指令是惰性的，即如果初始值为false，则该元素不会被渲染出来，直到isShow的值变为true时才会被渲染出来。此外，v-if指令也支持v-else和v-else-if指令，用于实现条件分支。 例如，下面的代码演示了如何使用v-if和v-else指令来实现条件分支： ```html <div v-if="type === 'A'">这是类型A的元素</div> <div v-else-if="type === 'B'">这是类型B的元素</div> <div v-else>这是其他类型的元素</div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值