v-if 不生效----vue深入式响应原理

最新推荐文章于 2024-03-31 22:19:25 发布
最新推荐文章于 2024-03-31 22:19:25 发布
阅读量5.7k 收藏 3
点赞数 9
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhibu_8048/article/details/114843907
版权

今天在写的一个行内编辑功能，想通过v-if 判断行内是否是编辑状态，来展示是input输入，还是普通显示文本，初始化默认的scope.row.ipshow1=true,点击编辑按钮，想通过@click='scope.row.ipshow1===false',来改变状态，重新渲染列表实现行内编辑，然后并不能达到预期效果.

通过多次百度，查到了关于深入响应式原理（附上官方文档https://cn.vuejs.org/v2/guide/reactivity.html），一句话总结：由于javascript 的显示，Vue 不能检测数组和对象的变化，了解了这个原理之后，我的代码做了如下修改，最终实现了行内编辑的效果（官方文档讲的特别清楚，大家一看就明白）：

那些这个夏天
关注
  • 9
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的工作原理。 首先，`v-for`是用来遍历数组或对象并生成多个重复的元素，它是Vue中的一个非常重要的指令。而`v-if`和`:class...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令...这在实际开发中是非常实用的技巧，能够帮助我们构建响应式且易于维护的Vue应用。希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
vue v-if 失效问题
qq_44130891的博客
01-11 1013
vue v-if 失效问题
vue中v-if失效
最新发布
leo的博客
03-31 189
通过console.log(this.ispersonal)也能正常输出对应的true 或者false，但始终前端元素没有得到效果，开始以为是vue加载顺序原因，使用了。后来发现通过本地缓存获得的值是一个字符串的“true”和“false”，将字符串转换为布尔值。在vue中通过v-if去控制元素的显示，但这次出现没有生效，mounted(){}中运行依然不行。我是通过获取本地缓存值。
【Vue2】v-if 绑定的数组或对象属性变化不响应问题解决详解
NineWaited的博客
08-10 4519
具体内容与双向绑定、$set()方法相关。整体内容过长，如果想参考最终解决，直接跳到总结即可；如果想要看一下实际情况，可以耐心浏览。
VUE v-if不起作用
热门推荐
happygirlnan的专栏
10-15 2万+
<div id="projEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> <projEdit v-if="showEdit" :data="data"&
Vue3.0踩坑 ＜Transition＞标签配合v-if和v-else时代码失效和过渡失效的原因。
qq_32149823的博客
03-25 3589
问题描述 起因是我先用v-if和v-else完成图片加载前的骨架功能（在图片加载完成前会先显示骨架组件),代码截取如下： <ul v-if="goods.length" class="goods-list"> ..... </ul> <!-- 骨架屏组件 --> <HomeSkeleton v-else bg="#f0f9f4" /> 以上代码的功能正常，直到我给外层添加了Vue的<Transition>过渡标签，本意是想让二者切换
使用v-if v-else发现没有执行
Dear_Mr的博客
05-10 8881
使用v-if v-else发现没有执行最近在学习Vue，因为刚开始学习，所以总会遇到这样那样的问题，今天要说的一个错误就是在看Vue的官方文档的时候，发现在使用v-if和v-else指令的时候，相应的内容都出现了初始代码：<div v-if="Math.random > 0.5"> " Math.random > 0.5 " </div> <div v-else> " Math.random
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
vue2.0 可折叠列表 v-for循环展示的实例
10-18
Vue的响应式系统使得数据的变化能够自动更新视图。`data_item`是一个从父组件传递过来的prop，通过`created`生命周期钩子赋值为`item`，这样当父组件的`item`属性改变时，子组件的`data_item`也会相应更新。 5. **...
关于vuejs中v-if和v-show的区别及v-show不起作用问题
10-18
v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点
vue 使某个组件不被 keep-alive 缓存的方法
10-17
如果你不想让一个组件被`keep-alive`缓存，最直接的方式是在`keep-alive`标签上使用`v-if`或`v-show`，根据需要决定是否渲染组件： ```html <keep-alive v-if="shouldCache"> <my-component/> </keep-alive> ``` ...
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释
ScottePerk的博客
07-19 1556
基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。
v-if失效问题
MFline的博客
08-04 1013
v-if失效
vue.js笔记
weixin_43137482的博客
01-07 262
vue.js个人学习笔记 双向绑定 V-model指令：双向绑定，model中的值改变会改变显示中的值，显示的值改变的时候会改变el中的值； 使用它可以将数据模型中的值显示在表单控件中，还可以在用户改变表单控件值的情况下改变数据模型； 控件改变，vue也改变，反之如此； . 事件绑定 V-on:cick指令：用来绑定事件，冒号后面是事件类型；另一个写法 @click ; 事件绑定时必须...
vue中 v-if 遇到的问题
FE-阿阳的博客
02-02 2932
40. vue中 v-if 遇到的问题 问题描述 在添加患者中；botton 按钮用 v-if 隐藏掉之后，出现了不可见，但是可以点击的情况 解决方案 在 botton 外层添加了一层 session 标签；可能是 v-if 对行内块原理有兼容性；
vue中数据赋值后不渲染问题总结
qq_37721238的博客
03-26 7279
vue中常会出现组件不会渲染更新的问题，常用的方法总结了一下 1.用this.$forceUpdate()方法，改变值后直接调用就行 例如： this.data.tabDefault = false; this.$forceUpdate(); 2.如果是object或者是array类型的话改变值最好用this.$set()、this.$delete(),array.splice()等方法...
vue v-show不生效
06-09
在Vue中，v-show指令用于控制元素的显示和隐藏，它会根据绑定的表达式的值来判断是否显示元素，如果表达式的值为true，元素会显示出来，如果表达式的值为false，元素会被隐藏。 如果你发现v-show指令不生效，可以检查以下几个方面： 1. 检查绑定的表达式是否正确 首先要检查v-show指令绑定的表达式是否正确。你可以通过在模板中输出表达式的值来判断它是否为true。例如： ``` <div>{{ expression }}</div> ``` 2. 检查元素是否存在 如果元素不存在，v-show指令当然就无法生效了。你可以检查一下模板中是否正确地引入了该元素。 3. 检查元素样式是否被覆盖 如果元素样式被覆盖，v-show指令也会失效。你可以检查一下该元素的样式是否被其他CSS规则覆盖了。 4. 检查是否使用了v-if指令 如果你同时使用了v-show和v-if指令来控制元素的显示和隐藏，可能会出现v-show指令失效的情况。这是因为v-if指令会直接从DOM中移除元素，而v-show指令只是通过修改元素的display属性来控制元素的显示和隐藏。因此，如果一个元素被v-if指令移除了，它的v-show指令也会失效。 如果你要在同一个元素上同时使用v-show和v-if指令，建议将它们分别用在不同的子元素上，以避免出现问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值