uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效

uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效

开发环境 版本号 项目创建方式
Windows 1909 18363.1379 HBuilderX
## 示例代码:

```vue
<template>  
  <view class="fill-card analysis-answer-card">  
    <view class="subject">  
      <view class="tip"></view>  
      <view>{{ subject }}</view>  
    </view>  
    <view class="content" :class="showAnalysis ? 'has-show-line' : ''">  
      <view class="toggle-layout" @tap="handleToggleAnalysisShow">  
        <text>{{ showAnalysis ? '隐藏' : '显示'}}解析</text>  
        <text class="icon cuIcon" :class="showAnalysis ? 'cuIcon-fold' : 'cuIcon-unfold'"></text>  
      </view>  
    </view>  
    <view class="analysis" v-show="showAnalysis">  
      <view class="score-layout">  
        <view>  
          <text>正确答案:</text>  
          <text class="user-answer" :class="doRightClass">{{ correct }}</text>  
        </view>  
        <view v-if="score">得分:{{ score }}</view>  
      </view>  
      <view class="description">  
        {{ analysis }}  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  name: 'FillCard',  
  props: {  
    subject: String,  
    userAnswer: String,  
    correct: String,  
    doRight: Number,  
    score: Number,  
    analysis: String  
  },  
  computed: {  
    doRightClass () {  
      if (this.doRight === 1) {  
        return 'has-correct'  
      } else if (this.doRight === 2) {  
        return 'has-error'  
      } else {  
        return ''  
      }  
    }  
  },  
  data () {  
    return {  
      showAnalysis: false  
    }  
  },  
  methods: {  
    handleToggleAnalysisShow () {  
      this.showAnalysis = !this.showAnalysis  
    }  
  }  
}  
</script>  

<style lang="scss">  
[@import](/user/import) url("./index.scss");  
</style>  

操作步骤:

给元素设置display:flex 给元素加上v-show 通过按钮切换v-show隐藏显示

预期结果:

正常隐藏显示

实际结果:

隐藏显示切换无效

示例图片


更多关于uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已知问题,后续会考虑优化
原因:你写的样式权重更高
临时解决方案:使用权重更高的样式覆盖 app.vue style [hidden]{display: none !important;}

更多关于uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中,当给元素设置display: flex后,v-show失效的问题通常是由于样式优先级冲突导致的。v-show在uni-app中通过内联样式display: none来控制显示/隐藏,但如果外部CSS中设置了display: flex,其优先级可能高于内联样式,导致切换无效。

解决方案:

  1. 使用条件类名替代:通过动态绑定class来控制显示状态,例如:

    <view class="analysis" :class="{ 'hidden': !showAnalysis }">
    

    在CSS中定义:

    .analysis.hidden {
      display: none !important;
    }
    
  2. 调整样式优先级:确保v-show的内联样式不被覆盖,可以在flex样式后添加!important

    .analysis {
      display: flex !important;
    }
回到顶部