VUEclassstyle样式控制

    xiaoxiao2022-07-04  152

    class

    .a{ border:2px solid red; } .b{ background: darkmagenta; } data:{ title:"class && style 动态绑定 ", flagA:true, classObj:{ b:true, c:true }, isA:'a', isC:'c', id:1901, styleObj:{ border:"2px solid green" }, current:0 }, <div id="box" class="a b c" ></div> //正常书写方式 <div id="box" :class="{a:flagA,c:true}" ></div>//传入一个字面量 条件 属性名为 样式的名字(class) <div id="box" :class="classObj" ></div>//{b:true,c:true} 传入一个字面量 <div id="box" :class="[isA,isC]" ></div>//数组 传入类名 <div id="box" :class="id==1901?'a':'c'" ></div> //三目运算

    style

    <div id="box" :style="{borderRadius:'40%',backgroundColor:'yellow'}"></div> <div id="box" :style="styleObj"></div>//传入字面量 styleObj:{ border:"2px solid green" },
    最新回复(0)