vue动态样式

是谁眉眼

已于 2024-02-01 09:19:55 修改

阅读量553

点赞数 13

文章标签： vue.js javascript 前端

于 2024-01-31 15:40:40 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46370288/article/details/135947498

版权

本文介绍了如何在Vue组件中使用三目运算符实现style和class属性的动态绑定，展示了如何根据变量值来控制CSS样式和类名的显示或隐藏。

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

style对象三目:
:style="{'margin-left':(tabWidthd==''?'30px':'')}"


style普通
:style="{ color: activeColor, fontSize: fontSize + 'px' }"


class数组三目
:class=[ 三目运算符表达式 ? 'true类名' : 'false类名' ]
:class=[ true === 0 ? 'trueClass' : 'falseClass' ]
:class="[isActive ? activeClass : '', errorClass]"
class单个三目: 
:class = 'isflag ? "on" : ""'



class对象
:class = '{on: isflag}'



<script>
    const vm = new Vue({
        el: '#app',
        data: {
            tabWidthd:'',
            isflag: true,
            font20: "f20",
        }
    })
</script>