Vue中样式绑定的多种用法

今天给大家介绍一下Vue中样式绑定的多种用法

样式如下：

<style>
    .red {
      color: red;
    }
    .green {
      color: green;
    }
  </style>

<script>
  const app = Vue.createApp({
    data() {
      return {
        // 字符串写法
        classString: 'red',
        // 对象写法
        classObject: { red: false, green: true },
        // 数组写法
        classArray: ['red', 'green', {brown: false}],
        // 字符串写法 多样式
        styleString: 'color: yellow;background: orange',
        // 对象写法 多样式（建议）
        styleObject: {
          color: 'orange',
          background: 'yellow'
        }
      }
    },
    template: `
      <div :style="styleObject">
        Hello World
      </div>
    `
  });
  // $attrs.class 可以获取到父级组件的样式
  app.component('demo', {
    template: `
      <div :class="$attrs.class">one</div>
    `
  })

  const vm = app.mount('#root');
</script>