前端问题记录

本文介绍了在Vue.js中使用v-if和v-show进行条件渲染,以及如何利用:class进行动态样式绑定来实现不同场景的功能,如编辑和查看页面的权限控制,以及在审核页面中通过样式标记未审核的内容。此外,还展示了三元运算符在决定按钮文本和样式时的应用。
摘要由CSDN通过智能技术生成

v-if判断值除去dom元素

举例

view v-if="status!='applcation'"

<custom-msg v-if="item.msg.type == 'custom'">

 v-show显示隐藏

 v-show="item.status==0">下架</u-button 
    66:13              v-show="item.status==1"   >上架</u-button 

:class用法

比如编辑页面和查看页面,内容都是一样的,这时候可以设置一个状态来区分,通过这个状态变量来给编辑处加上class,这个class通过css来控制前端的权限,而不用写两个页面;再比如审核页面,需要查看哪些内容被修改过,修改过而未审核的标红,也可以设置统一的css。

        <view class="footer" v-if="!onlyRead">
            <view :class="compelet ? 'btn' : 'btn gray'" @click="submit">
                提交信息
            </view>
        </view>

三元函数用法

        <view :class="compelet ? 'btn' : 'btn gray'" @click="submit">
                {{storeApplyStatus == 'over' ? '完成' : '下一步'}}
            </view>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值