关于Vue中v-show中添加表达式用于判断是否为空null的问题

<div class="form-group">
            <div class="col-sm-2 control-label">添加题目:</div>
            <div class="col-sm-10"><br>
                <ol>
                    <li readonly="readonly" v-for="(item, index) in listQuestions" :key="index" style="width: 1450px;">
                            题目{{item.stem}}<br>
                        {{item.choiceB==null}}
                        uu{{item.choiceB==''}}
                        bb{{(!(item.choiceB==null)&&!(item.choiceB==''))}}
                        <p **v-show='(!(item.choiceA==null)&&!(item.choiceA==""))'**>A、{{item.choiceA}}</p><br>
                        <p v-show='(!(item.choiceB==null)&&!(item.choiceB==""))'>B、{{item.choiceB}}</p><br>
                        <p v-show='(!(item.choiceC==null)&&!(item.choiceC==""))'>C、{{item.choiceC}}</p><br>
                        <p v-show='(!(item.choiceD==null)&&!(item.choiceD==""))'>D、{{item.choiceD}}</p><br>
                        <p v-show='(!(item.choiceE==null)&&!(item.choiceE==""))'>E、{{item.choiceE}}</p><br>
                        <p v-show='(!(item.choiceF==null)&&!(item.choiceF==""))'>F、{{item.choiceF}}</p><br>
                    </li>
                </ol>

            </div>
        </div>

需求很简单。 因为是选择题。有可能是多选。 例如 a b c d e f 答案 abc

但是如果是 abcd 单选 我们只需要显示 abcd 答案 a

可以通过vue中的v-show 或者 v-if 记得加个括号。请指教。

我的实体类:

/**
     *实体ID
     */
    @TableId
    private  int questionId;
    /**
     *试题编号
     */
    private  String questionCode;
    /**
     *分类
     */
    private  int questionClassify;
    /**
     *类型
     */
    private  int questionType;
    /**
     *题干
     */
    private  String stem;
    /**
     *选项A
     */
    private  String choiceA;
    /**
     *选项B
     */
    private  String choiceB;
    /**
     *选项C
     */
    private  String choiceC;
    /**
     *选项D
     */
    private  String choiceD;
    /**
     *选项E
     */
    private  String choiceE;
    /**
     *选项F
     */
    private  String choiceF;
    /**
     *答案
     */
    private  String answer;
    /**
     *创建时间
     */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Date updateTime;
<div class="form-group">
            <div class="col-sm-2 control-label">题目:</div>
            <div class="col-sm-10"><br>
                <ol>
                    <li readonly="readonly" v-for="(item, index) in listQuestions" :key="index" style="width: 1450px;">
                        <strong>题目{{item.stem}}</strong>
                        <br><br>
                        <p v-if='(!(item.choiceA==null)&&!(item.choiceA==""))'>A、{{item.choiceA}}<br></p>
                        <p v-if='(!(item.choiceB==null)&&!(item.choiceB==""))'>B、{{item.choiceB}}<br></p>
                        <p v-if='(!(item.choiceC==null)&&!(item.choiceC==""))'>C、{{item.choiceC}}<br></p>
                        <p v-if='(!(item.choiceD==null)&&!(item.choiceD==""))'>D、{{item.choiceD}}<br></p>
                        <p v-if='(!(item.choiceE==null)&&!(item.choiceE==""))'>E、{{item.choiceE}}<br></p>
                        <p v-if='(!(item.choiceF==null)&&!(item.choiceF==""))'>F、{{item.choiceF}}<br></p>
                        <p v-show='(!(item.answer==null)&&!(item.answer==""))'>答案:&nbsp{{item.answer}}</p>
                    </li>
                </ol>
            </div>
        </div>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue,v-show是一种指令,用于根据表达式来切换元素的显示和隐藏。v-show指令仅仅是将元素的display属性设置为none或恢复原有。它并不提供过渡效果。如果你想要为v-show添加过渡效果,可以使用Vue的过渡系统结合v-if或者transition组件来实现。 使用v-if和transition组件来添加过渡效果的步骤如下: 1. 在需要添加过渡效果的元素外面包裹一个transition组件。 2. 设置该transition组件的name属性,用于指定过渡效果的类名前缀。 3. 在transition组件内部,使用v-if控制元素的显示和隐藏。 4. 在transition组件内部,使用transition类名前缀结合过渡类名来定义过渡效果的样式。 举个例子,如果你想要为一个div元素添加v-show的过渡效果,可以按照以下方式进行设置: ```html <transition name="fade"> <div v-show="show">显示</div> </transition> ``` 在上述例子,fade是过渡效果的类名前缀,你可以在CSS定义fade-enter、fade-enter-active、fade-leave、fade-leave-active等类名来定义过渡的开始状态、生效状态和结束状态。这样,当show的发生变化时,div元素将会根据过渡效果的定义进行显示和隐藏的过渡。 总结起来,v-show本身并不提供过渡效果,但你可以使用Vue的过渡系统结合v-if或transition组件来实现v-show的过渡效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue为v-if或v-show添加过渡动画效果](https://blog.csdn.net/m0_48076809/article/details/129617143)[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: 33.333333333333336%"] - *2* [vue元素实现动画过渡效果](https://download.csdn.net/download/weixin_38565003/13615774)[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: 33.333333333333336%"] - *3* [web前端vue之CSS过渡效果示例](https://download.csdn.net/download/weixin_38714641/13202457)[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: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值