<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>