小程序中display:flex和v-show，v-show不生效,uni-app

最新推荐文章于 2025-06-06 16:27:06 发布
最新推荐文章于 2025-06-06 16:27:06 发布
阅读量2k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
文章标签： 小程序 uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sun6223508/article/details/132354669
博客指出在小程序里，使用display:flex和v-show时v-show不生效。原因是display:flex样式优先级高于v-show（v-show本质是display:none）。解决方案是使用:style=\判断对象?‘’:‘display:none;’\。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

小程序中display:flex和v-show，v-show不生效、、

解决方案：
display：flex样式的优先级高于了v-show ，v-show其实就是display：none，display：flex优先级高于display：none。

使用

:style=“判断对象?‘’:‘display:none;’”

在这里插入图片描述

uniapp 微信小程序v-show 不显示
前端程序员、项目经理、人工智能博主
12-04 6603
最近在做一个项目发现在uniapp组件上定义的v-show能正常显示隐藏，但是编译到微信小程序就全部隐藏的内容都显示出来了 百度完发现一个问题就是微信小程序不支持"hidden"属性,因v-show是直接控制css的属性的 第一种方法直接将v-show改为v-if 第二种方法是直接在组件上定义 hidden ,然后通过传入hidden的布尔值改变显示隐藏 ...
uni-app实战之社区交友APP（3）Vue.js和uni-app基础
CUFEECR的博客
01-23 1544
view是视图容器，用于包裹元素内容，有hover-class等属性，text是文本组件，用于包裹文本内容；uni-app支持普通和CSS3选择器；uni-app推荐Flex布局，有多种用法实现灵活布局，可以灵活选择。数据在data中定义，在页面中用{{}}包含，即可渲染数据，可以实现动态修改；可以动态修改class和style属性；条件渲染使用v-if实现；使用v-for实现列表渲染，遍历数组或对象。事件处理器用于处理点击等事件；监听属性在watch属性中定义；计算属性在computed属性中定义。
uniapp中，v-show显示不生效的原因
qq_58752847的博客
11-11 1897
原文链接：https://blog.youkuaiyun.com/qiansitong/article/details/119886746。经排查原因后发现是因为display：flex样式的优先级高于了v-show中的display：none。display：flex不要放在局部样式中(比如style上添加scoped或者是用多层样式嵌套)同时使用v-show与display:flex的时候，发现v-show不能隐藏元素。出bug，转载......
v-if 和 v-show 混用，导致 v-show 可能不起作用的原因
u013994400的博客
06-06 144
1、v-show 作用于元素，template 是抽象标签， 标签本身不会渲染成真实 DOM 元素，v-show 绑定在 上不会生效。v-if 和 v-show 混用，且分别包裹在两个 标签里。1、把 v-show 直接放到真实元素上。2、用 v-if 替代 v-show。3、包裹元素承载 v-show。
v-show在uniapp中的使用不生效的问题
lsjweiyi的博客
04-23 6620
<template> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <uni-popup ref="popup"> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <v
uni-app小程序中v-show与display:flex一起使用时v-show不生效！
qiansitong的博客
08-24 2847
问题： 同时使用v-show与display:flex的时候，发现v-show不能隐藏元素 原因： 经排查原因后发现是因为display：flex样式的优先级高于了v-show中的display：none 解决办法： display：flex不要放在局部样式中(比如style上添加scoped或者是用多层样式嵌套) ...
uni-app小程序v-show内容始终不显示
weixin_43655896的博客
02-13 1194
<view class="title" v-show="searchList.length">联系人</view> ...... data() { return { searchList:[], } } 使用以上方式控制该标签的显示，判断条件为searchList数组的长度，数组为空不显示标签； 浏览器运行正常，但在小程序中数组非空时也不显示 解决方法：使用计算属性 <view class="title" v-show="sea.
关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题
qq_53499304的博客
12-04 8686
本文关于v-show与v-if的区别，以及在uni-app小程序中v-show失效问题如何解决等在本文中均有描述，希望对你有所帮助
v-show不起作用
大雾起了清晨
08-01 1701
当v-show不起作用，很大一部分是因为该标签设置了display属性样式如display: flex，该样式的优先级高于v-show的display:none/display:block，导致v-show不起作用 此时可以使用v-if替代v-show，或者去掉该标签的display属性样式...
[uni-app]微信小程序隐私保护指引设置的处理记录
iOSTianNan的博客
09-05 4246
有过APP开发,尤其是安卓开发的都知道, 这玩意就是学着安卓的隐私授权来的.一切的起因就是上面这则公告. 2023年9月15日后。在uni-app中创建easy-components。网上资料千千万, 这里放几个比较有价值的帖子或链接。上面资料里面说的算是比较详细了,这里不多废话了。3.怎么退出小程序or 为啥退出不了小程序 –0.弹框是不是每次都要弹?4.怎么打开隐私协议?优点是 逻辑简单/代码不复杂。是一个插件,使用也简单。这里着重提几个关键点。
``` <template> <view class="find-container "> <view class="head"> <view class="tab-list2"> <view @tap="changeTab(1,1)" :class="['tab-item2','',activeTab1==1?'active':'']"> <text>待打印</text> </view> <!-- #ifdef MP-WEIXIN --> <view @tap="changeTab(2,1)" :class="['tab-item2','',activeTab1==2?'active':'']"> <text>已打印</text> </view> <!-- #endif --> <view @click="showDrawer('showRight')" :class="['tab-item2']" > <image class="icon" mode="aspectFit" src="@/static/image/search-icon.png"></image> </view> </view> <view class="tab-list " > <view v-for="(item,index) in order_status" @tap="changeTab(1,index)" :class="['tab-item','',activeTab2==index?'active':'']"> <uni-badge class="uni-badge-left-margin" max-num="99999" :is-dot="item.activeTabJiNum==0" :text="item.activeTabJiNum" absolute="rightTop" :offset="[-6, -3]" size="small" v-if="activeTab2==index"><text>{{item.text}}</text></uni-badge> <text v-else>{{item.text}}</text> </view> </view> <view class="tab-list " v-if="activeTab1==2"> <view v-for="(item,index) in team_status" @tap="changeTab(2,index)" :class="['tab-item','',activeTab2==index?'active':'']"> <uni-badge class="uni-badge-left-margin" max-num="99999" :is-dot="item.activeTabJiNum==0" :text="item.activeTabJiNum" absolute="rightTop" :offset="[-6, -3]" size="small" v-if="activeTab2==index"><text>{{item.text}}</text></uni-badge> <text v-else>{{item.text}}</text> </view> </view> </view> <view style="height: 100vh;background-color: rgb(243, 246, 249);flex: 1;z-index: 9999;"> <view style="flex: 1;z-index: 9999;display: flex;">5555</view> </view> <view class="fixed-bottom"> <view style="display: flex;margin-left: 50rpx;float: left;margin-top: 20rpx;font-weight: bold;">打印机:</view> <view style="display: flex;float: right;margin-top: 20rpx;font-weight: bold;padding-right: 10rpx;">无打印机，去连接 ></view> <view style="margin-top: 100rpx;display: flex;margin-left: 70rpx;color: gainsboro;"> <checkbox-group> <label class="checkbox"> <checkbox :value="checked" :checked="checked" /> 全选 </label> </checkbox-group> </view> <view style="display: flex;margin-left: 340rpx;margin-top: -60rpx;"> <view class="btn">立即打印</view> </view> </view> <uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="false" :lunar="true" :range="true" @confirm="confirm" @close="calendarClose" /> <uni-drawer ref="showRight" mode="right" :mask-click="true" width="300" @change="drchange($event,'showRight')"> <view class="scroll-view"> <scroll-view class="scroll-view-box" scroll-y="true"> <view class="info"> <input class="ipt"placeholder="订单号/快递单号/手机号/寄件人/收件人" placeholderStyle="font-size: 24rpx;" type="text" v-model="mailNo"></input> </view> <view class="close"> <button type="primary" @click="closeDrawer('showRight')"><text class="word-btn-white">搜索</text></button> </view> </scroll-view> </view> </uni-drawer> </view> </template>```<view style="flex: 1;z-index: 9999;display: flex;">5555</view>这个5555不显示出来
03-27
首先，用户提供的代码是一个Vue模板，用于uni-app框架，可能是用于微信小程序或其他平台。代码结构中有多个视图容器，可能涉及条件渲染、样式覆盖或布局问题。 首先，检查包含“5555”的代码部分： ```html ...
Uni-app 笔记二 (项目笔记)
u014105655的博客
01-29 855
Uniapp 项目 笔记
uni-app多端开发
weixin_43993776的博客
11-08 2118
开场白： 要是在 vscode 书写代码， 需要添加 几个插件来支持 uni-app。
uniapp flex 未生效, 未自动分配高度
qq_33641175的博客
10-08 1861
flex在打包后未无效, 在浏览器中有效 <template> <view class="m-check"> <view class="" style="width: 100%; background-color: #1890FF; flex:10;"></view> <view class="" style="flex:80;background-color: yellow;"></view> <view clas
uni-app v-show 和 focus无法一起使用，聚焦无效
weixin_39579031的博客
05-15 743
uni-app 微信小程序handleClick 点击按钮的时候，需要把textarea 显示出来并聚焦，但是实际上安卓手机可以，但是苹果手机无法聚焦。一开始本来到网上找怎么用uniapp获取textarea元素，用ref怎么也获取不了textarea元素，后面发现官方文档写了。后面想估计是因为苹果手机的小程序的js代码执行比v-show更快，导致没有执行成功。因此用一个新的响应式变量延迟到下一个时间片执行便可以了。
v-show 失效？原因竟然是这！
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
01-02 1883
v-show失效原因探索
uni-app使用v-show编译成微信小程序的问题
菜鸡的博客
10-10 1272
当我们设置成在Hbuilder X里面确实没有显示然后运行到 微信开发程序里面发现显示了出来，说明设置的没有起作用。
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释
ScottePerk的博客
07-19 1982
基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。
uniapp开发问题总结
qq_53489791的博客
08-24 1192
记录使用uniapp开发微信小程序时遇到的一些问题
:show-menu-by-longpress="true" 长按没有识别二维码
最新发布
08-06
**属性使用**：在uni-app中，组件的属性如果是布尔类型，我们通常使用:show-menu-by-longpress="true"（v-bind绑定）或者直接写show-menu-by-longpress（此时属性值为字符串，但微信小程序会将其转换为布尔值true）...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值