Vue.js 极简小例： 4 种方式样式绑定、style 的多种方式实现

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

代码：

<template>
 <div id="app">

    <!-- JSON方式使用样式 -->
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">样式使用小例</div>

    <!-- 原始样式使用 -->
    <div style="color: green; font-size: 18px;">此行样式同于上一行</div>

    <!-- 对象方式使用样式 -->
    <div v-bind:style="styleObject">样式同于上2行 </div>

    <!-- 数组方式使用样式 -->
    <div v-bind:style="[styleObject, overridingStyles]">我只是在前面基础上把字体加粗</div>

  </div>
</template>


<script>
  export default {
    data () {
      return {
        activeColor: 'green',
        fontSize: 18,
        styleObject: {
          color: 'green',
          fontSize: '18px'
        },
        overridingStyles: {
          'font-weight': 'bold'
        }
      }
    }
  }
</script>

运行效果：（红框中）