Vue动态设置Style属性

╰+哭是因爲堅強的太久メ 2022-09-14 03:06 624阅读 0赞

[Vue动态设置Style属性\_fuzhongbin的博客-CSDN博客\_vue 动态style][Vue_Style_fuzhongbin_-CSDN_vue _style]

:style="{ color:domain.groups == 1? '#ccc': domain.groups == 2 ? '#ccc' : '' }"

凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
    除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff
         对象
    html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
    
    html :style="{display:(activeName=='first'?'flex':'none')}"
    
         数组
         html :style="[baseStyles, overridingStyles]"
    
         html :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]"
    
        三目运算符
        html :style="{color:(index==0?conFontColor:'#ddd')}"
    
        html :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"
    
       多重值
        此时，浏览器会根据运行支持情况进行选择
    
       html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

[Vue_Style_fuzhongbin_-CSDN_vue _style]: https://blog.csdn.net/fuzhongbin/article/details/104970325

发表评论取消回复

表情：

评论列表（有 0 条评论，624人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】动态给id设置style样式

一、背景有个需求需要动态控制数字的颜色，监听之，然后设置对应颜色二、代码 1、监听字段 watch:{ taskNum(

迷南。/ 2024年03月27日 15:23/ 0 赞/ 89 阅读

相关 vue-style里面设置变量

1、演示HTML主体结构 <div class="header" ref="mycolor" @click="func"> <div cla

客官°小女子只卖身不卖艺/ 2023年10月11日 13:38/ 0 赞/ 34 阅读

相关 VUE_vue动态绑定style属性

方式一：  <div :style="{ height: `${ statusBarHeight}px

妖狐艹你老母/ 2022年12月27日 12:50/ 0 赞/ 220 阅读

相关 Vue动态设置Style属性

[Vue动态设置Style属性\_fuzhongbin的博客-CSDN博客\_vue 动态style][Vue_Style_fuzhongbin_-CSDN_vue _sty

╰+哭是因爲堅強的太久メ/ 2022年09月14日 03:06/ 0 赞/ 625 阅读

相关 vue ＜style＞标签的scoped 属性

大家都知道当 <style> 标签有 scoped 属性时表示它的样式作用于当下的模块，很好的实现了样式私有化的目的。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了

Myth丶恋晨/ 2022年09月03日 01:15/ 0 赞/ 379 阅读

相关 vue中动态设置style样式和使用filters过滤器设置样式

例如：想给图片增加高度和宽度 <el-image :class="classRotation" v-if="imageData.src !== u

ゝ一世哀愁。/ 2022年09月01日 13:48/ 0 赞/ 253 阅读

相关 Vue框架整理：动态设置样式style、class

先来说一下： :class 是可以与一般用class 并存的动态添加的类名是基于数据的，当对应的数据为 true 时会显示，否则没有对象语法：绑定单个cl

Dear 丶/ 2022年05月22日 09:07/ 0 赞/ 292 阅读

相关 Vue动态绑定Class 与 Style

Class 可以通过对象语法和数组语法进行动态绑定 <div v-bind:class="{ active: isActive, 'text-danger': has

悠悠/ 2022年05月21日 01:26/ 0 赞/ 290 阅读

相关 vue-router—10动态设置name属性左右切换

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9q

柔情只为你懂/ 2022年01月15日 12:19/ 0 赞/ 698 阅读

相关 vue v-bind添加类名、style属性、动态参数

(1)v-bind添加类名 css定义好后,需要在data中声明后才能绑定 1、通过v-bind:class='xx'标签添加类,可通过

本是古典何须时尚/ 2021年07月24日 13:48/ 0 赞/ 422 阅读