当前博客:动态css的问题

96 次浏览【转载需注明来源】

博客作者:【1888****8888】

个性签名:寒窗苦读十年,一朝凤舞九天

下面这段代码是在循环渲染里面

<区块>
                        <基础标签>{{data.flow}}</基础标签>
                        <基础标签>{{data.name}}</基础标签>
                    </区块>
Markup

data.flow  这个变量里面的内容是固定的二个值 分别是  “+“   ”-“    我怎么动态设置他们的css  比如内容为+的时候设置成蓝色  为-的时候设置为红色

 

我是0css 基础开始学习这个快码的 求指导

 

<基础标签 :类名="data.flow=='+'?'加号':'减号'">{{data.flow}}</基础标签>

 . 加号 {
        字体-大小: 26px;
        文本颜色: #2669af;
        字体-粗细: 粗体;
        字体-组: helvetica;
        右边距: 50rpx;
    }

    . 减号 {
        字体-大小: 26px;
        文本颜色: @颜色值_红色;
        字体-粗细: 粗体;
        字体-组: helvetica;
        右边距: 50rpx;
    }

 

我现在是这样写的 无效 

w

默认排序
Generic placeholder image
Generic placeholder image
已采纳
qiang Time: 2023-09-29 23:41:18

方法一:在外面做判断,如果是+,显示类名为加号的代码语句,否则显示类名为减号的语句;在方法里面做判断,写一个方法,传入+或者-,方法里面进行判断,返回 jiahao或者jianhao(注意css样式名也要做成拼音,否则编辑器编译会有音调)。

方法二:动态类名,如下。

:类名="{'jiahao': data.flow== '+','jianhao': data.flow== '-'}"
// 注意这里的类名中文无法翻译,我用的拼音
Markup

方法三:三元判断

:类名="[data.flow  == ‘+’ ? 'jiahao' : 'jianhao' ]"
Markup

更多方法可以参考:

vue uniapp等动态添加类名_uniapp动态添加类名-CSDN博客

 


动态css的问题