zoukankan      html  css  js  c++  java
  • vue动态添加style样式

    注意:

    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
    除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff
    【对象】
    html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

    html :style="{color:(index==0?conFontColor:'#000')}"

    【数组】
    html :style="[baseStyles, overridingStyles]"
    html :style="[{color:(index0?conFontColor:'#000')},{fontSize:'20px'}]"
    【三目运算符】
    html :style="{color:(index
    0?conFontColor:'#000')}"
    html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
    【多重值】
    此时,浏览器会根据运行支持情况进行选择

    html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
    【绑定data对象】
    html :style="styleObject"

    
    data() {
        return{
          styleObject: {
            color: 'red',
            fontSize: '13px'
          }  
        }
    }
    

    转载于:https://juejin.im/post/5d5dfbde6fb9a06b122f4226

  • 相关阅读:
    第八次作业
    微信用户体验
    •设计一款给爸爸妈妈用的手机
    对类的继承
    必应词典
    第二次作业二
    第二次作业
    我想搞的软工
    数字签名
    C++的学习心得
  • 原文地址:https://www.cnblogs.com/axingya/p/15394527.html
Copyright © 2011-2022 走看看