多种动态绑定class和style

最新推荐文章于 2024-06-19 13:24:57 发布

——周彤——

最新推荐文章于 2024-06-19 13:24:57 发布

阅读量708

点赞数 2

分类专栏： vue 文章标签： html 前端

本文链接：https://blog.csdn.net/Zt0118/article/details/127883688

版权

Vue 动态样式类绑定条件表达式对象语法

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.三元表达式

<h3 :class="italic ? 'italic' : '' " >111</h3>
<h3 :style="italic ? 'color:red' : '' " >111</h3>
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
<div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>
<!-- 写法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div
<!-- 写法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>
<!-- 写法三 -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': 'red')}"></div>

2.动态绑定多个

<h3 :class="[istalic ? 'italic' : '',isFalg ? 'active' : '']" >111</h3>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

3.对象的语法绑定

<h3 :class="objClass" >111</h3>
<div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>


data(){
    return{
        objClass:{
            itailc:true,
            del:false
        }
    }
}