【Vue】组件中v-show不渲染问题的解决

最新推荐文章于 2023-07-19 09:46:05 发布
VIP文章 最新推荐文章于 2023-07-19 09:46:05 发布
阅读量4.1k 收藏 1
点赞数 1
分类专栏： Vue JavaScript 前端 文章标签： vue v-show不渲染 子组件v-show不渲染 v-show无效 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/talonzhang/article/details/104066711
版权
问题：

在使用 uni-app 开发的时候，写了一个类似于微博的关注组件，功能就是未关注的文章显示+关注按钮 ，关注后按钮消失。使用 v-show 来写，用一个变量isFollow来监听，isFollow来自于父组件通过 props传递。

但是遇到一个问题就是：点击事件中修改isFollow的值之后，view 没有渲染，点击后关注按钮仍然存在，值确实已经发生改变，但 view 并没有重新渲染。

<view class="u-f-ac" v-show="!item.isFollow" @tap="follow">
	<view class="icon iconfont icon-zengjia"></view>
	关注
</view>
最低0.47元/天 解锁文章
Talon不会写代码
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue学习笔记之v-if和v-show的区别
12-11
v-if vs v-show v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。 <template> <div id
Vue入门（一）之view层语法
qq_38256266的博客
08-02 5335
Vue入门（一）1、vue介绍2、vue框架的两大核心3、 正式进入Vue的学习了，话不多说，直切主题！ 1、vue介绍 是一套用于构建用户界面的渐进式框架。 更多详细信息可前往官网查看。 2、vue框架的两大核心 数据驱动和组件化。 数据驱动 通过控制数据的变化来改变（驱动）DOM。 3、 ...
关于v-show失效以及没有数据时渲染报错处理
qq_41430522的博客
03-17 1353
v-show不能使用在template上，不然失效，v-if可以 然后有时候你会发现，没有数据渲染会报错，啥cannot read 。。of undefined， 比如你再页面上写了{{result.row.name}} 但是你这次请求到的数据 压根没有row属性，只有个result空对象，如果你只是用result.row那就只显示个undefined，但是你还点一下name，那就会报错了，很常见的错误，啥cannot read 。。of undefined 关于这个错误，如果用的是v-if，其.
vue面试题总结
qq_60976312的博客
10-14 535
vue面试题总结
前端Vue自定义弹框、自定义弹框内容 alertView showModel popup 组件
chenchuang0128的博客
07-19 1558
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。今天给大家介绍的一款组件:快速实现前端Vue自定义弹框、自定义设置弹框内容alertView popup组件， 附完整源码下载地址：https://ext.dcloud.net.cn/plugin?id=12491。
v-show渲染时数据不存在报错
weixin_46176363的博客
12-15 1022
v-show只要满足条件，视图将会渲染，渲染后条件为false时候，其实视图还存在，只不过是被display:none隐藏。这个时候如果之前通过v-show控制的元素的数据丢失就会报错，归根到底还是跟其渲染方式有关系，使用v-if可以解决问题。 v-if条件存在就会重新渲染视图，会触发v-if控制的元素的vue生命周期钩子函数，v-show不会。 ...
vue基础语法（view层）
CIA的博客
10-25 2294
data选项 功能：data选项中存储的是页面中需要显示的数据， 是初始化数据的位置，是元数据，是vue实例的一个实例属性 可以接受的数据类型: number/string/boolean/array/json/undefined/null/function 常用模板语法 1.插值表达式{{xxx}} 在模板中输出变量,在插值表达式中是可以写JavaScript表达式的。 例如：{{1+2}}，但不能写语句。 2.基础指令 v-html 转义输出变量的HTML标签，可以让html标签里的内容
Vue不能实时双向绑定数据的问题
Jim Suen
11-30 1973
情景： 有一个div通过v-show绑定数据data的isClick属性来控制显示（data原本是没有isClick属性的） 当点击该某个按钮时候，为data数据设置isClick=true 但是发现点击按钮后 div并不显示，继续进行其他操作时候，div才显示（显示慢了一步） 解决： 出现这一个不能实时双向绑定现象的原因是data最开始没有isClick属性，而当点击按钮时候直接为data...
v-show不更新显示问题
A_Brave的博客
03-26 1704
问题 做uniapp项目的时候遇到使用v-show进行图片的切换（显示隐藏）发现v-show绑定的值变为true的时候，当前元素不进行更新 图片上传完成后赋值 如上图 employeeForm.idCardReverse有值的话就显示当前值的图片 没值的话就显示默认图片。 图片上传完成之后会给employeeForm.idCardReverse赋值。 打印结果也显示成功赋值，但是上传之前的employeeForm.idCardReverse值显示的是undefined而不是一个空字符。 于是寻找了一下
v-if 和v-show条件渲染
xyfck的博客
09-17 1004
v-if v-show的区别、使用
如何区分vue中的v-show 与 v-if
11-19
1. v-show 不管初始的条件是什么，元素总是会被...当和 v-for 一起使用时，v-for 的优先级比 v-if 更高，详见 vue官网关于 v-for 的详细描述 ，为什么不能一起使用，以下我用代码来解释一下。 <li v-for = "(i
vue中v-show和v-if的异同及v-show用法
12-12
1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染...
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
Vue.js使用v-show和v-if的注意事项
11-30
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-...
关于vuejs中v-if和v-show的区别及v-show不起作用问题
12-11
v-if 是’真正的’条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- – 直到条件第一次为真的时候才会开始渲染条件块...
Vue第一天
lovewulibingbing的博客
03-24 165
一、什么是Vue.js？ 1.Vue.js是目前最火的一个前端框架,是前端的主流框架之一 2.和Angular.js、React.js一起，并成为前端三大主流框架 3.是一套构建用户界面的框架，只关注视图层 二、为什么学习流行框架 1.为了提高开发效率：在企业中，时间就是效率 2.让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑 三、框架和库的区别 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要 重新架构整个项目 库（插件）：提供某一个小功能，对
vue中解决v-show中的值改变，但视图不刷新问题
热门推荐
zhangyifang_009的博客
04-11 1万+
vue中解决v-show中的值改变，但视图不刷新问题 问题：之前使用全局变量和v-show来解决div隐藏问题，类似这样 <el-button type="primary" @click="showAdvanceSearchView=!showAdvanceSearchView"> <div v-show="showAdvanceSearchView" > X...
使用vue组件时数据因为某些事件导致页面数据不实时更新
路飞船长的博客
07-22 2899
页面输入数据时,数据渲染不到自己的输入框内,必须点击其他操作才可以显示出来。
vue-cli3.x以上版本中使用v-show or v-if无法做到实时更新
qq_37021104的博客
04-10 1522
当我有个element表格，想要做到点击编辑并保存时，我会想到这么做 <el-table :data="userInformation" :row-class-name="changeClassName"> <el-table-column min-width="50" label="用户名" prop="...
vue3中v-show使用
最新发布
08-23
在Vue3中，v-show指令用于控制元素的显示与隐藏。与v-if不同的是，v-show在不满足条件时不会将元素从DOM中移除，而是通过修改元素的display属性来实现隐藏。这样可以节省一些渲染开销。 然而，在使用v-show的时候，如果组件有多个根节点，会出现问题。例如，当我们尝试使用v-show控制一个有多个根节点的组件时，v-show将不会生效，组件不会隐藏。 解决这个问题的办法是使用watch来监听v-show的变化。当v-show的值发生变化时，我们可以执行一些操作。这样可以在修改v-show的同时实现其他的逻辑。 需要注意的是，如果切换频率不高，使用v-show可能是一个不错的选择。因为v-show只是通过修改display属性来实现切换，相对来说比较轻量。但如果需要频繁切换的话，可能会有一些性能方面的影响，这时候可以考虑使用v-if来代替v-show。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【vue3】07. 跟着官网学习vue3-条件渲染，v-if和v-show](https://blog.csdn.net/qq_17335549/article/details/126675688)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值