1. 动态绑定style样式注意点

• 通过短横杠(-)连接的属性名都要转为驼峰形式，例：font-size要变成fontSize；
• 如果直接写样式属性的值，需要用引号引起来，例：fontSize: ‘16px’

2. 动态绑定style样式的几种写法

1. 对象形式写法

style样式中属性的值可以在data中定义，也可以直接写。

<template>
  <div>
    <h2 :style="{ fontSize: size + 'px', color: fontColor }">Hello World</h2>

    <h2 :style="styleObj">Hello World</h2>

    <h2 :style="{ fontSize: '30px', color: '#ff0000' }">Hello World</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 30,
      fontColor: '#ff0000',

      styleObj: {
        fontSize: '30px',
        color: '#ff0000'
      }
    };
  },
};
</script>

2. 数组形式写法

数组形式写法就是把一组一组的样式放到一起。

<template>
  <div>
    <h2 :style="[{ fontSize: '30px', color: '#ff0000' }, { fontStyle: 'italic' }]">Hello World</h2>
    <h2 :style="styleArr">Hello World</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleArr: [
        {
          fontSize: '30px',
          color: '#ff0000'
        },
        {
          fontStyle: 'italic'
        }
      ]
    };
  },
};
</script>

3. 三元运算符判断添加

<template>
  <div>
    <h2 :style="flag ? 'font-size: 30px' : '10px' ">Hello World</h2>

    <h2 :style="{ fontSize: flag ? '30px' : '10px' }">Hello World</h2>
    
    <h2 :style="[{ fontSize: flag ? '30px' : '10px' }]">Hello World</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    };
  },
};
</script>