vue 静态/动态绑定style的几种方式【Vue】

静态绑定内联样式

v-bind:style 的对象语法十分直观，CSS属性名可以用 驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用引号括起来) 来命名：

对象

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {

  activeColor: 'red',

  fontSize: 30

}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {

  styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

三元判断的对象

<div :style="{color:(index == 0 ? conFontColor : '#000')}"></div>

数组

三元多属性

:style="[{height:(warnData.length > 0?'calc(100% - 54px - 42px)':'calc(100% - 54px)')},{color:'#fff'}]"

动态绑定内联样式

本文以 CSS Grid 网格布局教程 为例，解释如何用传参的形式，动态绑定内联样式

使用计算属性computed

对象语法常常结合返回对象的计算属性使用。

计算属性系统自己会执行前一层函数，所以需要以函数的形式返回样式，直接返回对象需要加括号，不加括号就认为是箭头函数的大括号了。

<div class="container">

  <div 

    v-for="(item, index) in items" 

    :key="index" 

    class="item.name" 

    :style="itemObject(item)"

  >

    {{ item.name }}

  </div>

</div>

data() {

  return {

    items: [

      {

        'name': 'PWR_1',

        'background': '#e5e4e9',

        'columnStart': 1,

        'columnEnd': 2,

        'rowStart': 1,

        'rowEnd': 2

      },

      {

        'name': 'FAN_1',

        'background': '#e5e4e9',

        'columnStart': 2,

        'columnEnd': 3,

        'rowStart': 1,

        'rowEnd': 2

      },

      {

        'name': 'FAN_2',

        'background': '#e5e4e9',

        'columnStart': 3,

        'columnEnd': 4,

        'rowStart': 1,

        'rowEnd': 2

      }

    ]

  }

},

computed: {

  itemObject(item) {

    return (item) => ({

      backgroundColor: item.background,

      gridColumnStart: item.columnStart,

      gridColumnEnd: item.columnEnd,

      gridRowStart: item.rowStart,

      gridRowEnd: item.rowEnd

    })

  }

}

.container {

  display: grid;

  grid-template-columns: repeat(4, 25%);

  grid-template-rows: repeat(2, 30px);

}

.item {

  font-size: 12px;

  text-align: center;

  border: 1px solid white;

  display: flex;

  justify-content: center;

  align-items: center;

}