学习-Vue3-绑定内联样式

<template>
  <div>
    <!-- 绑定内联样式--绑定对象 -->
    <!-- <div :style="{color: activeColor, 'font-size': fontSize+ 'px'}">测试</div>
    -->
    <div :style="styleObj">绑定对象</div>

    <!-- 绑定数组
          我们还可以给 :style绑定一个包含多个样式对象的数组。这些对象会被合并后
          渲染到同一个元素上： -->
    <div :style="[activeStyle1, activeStyle2]">绑定数组</div>
    <!-- 自动前缀
          当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们
          加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器
          不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。 -->
    <!-- 样式多值
          你可以对一个样式属性提供多个（不同前缀的值），举例来说： -->
    <div :style="['-webkit-box', '-ms-flexbox','flex']">样式多值</div>
    <!-- 数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。 -->
  </div>
</template>

<script setup>
// 不要忘记引入ref, reactive, computed等等,否则会报错
import { reactive } from 'vue'
// const activeColor = ref('red')
// const fontSize = ref(30)

// 直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁：
const styleObj = reactive({
  fontSize: '30px',
  color: 'green'
})

const activeStyle1 = reactive({
  // 字体加粗
  fontWeight: 'bold'
})

const activeStyle2 = reactive({
  color: 'blue'
})

</script>