Vue3 样式绑定: 内联样式与Class属性的数组语法
示例代码：
```vue
{{ title }}
<script>
import { ref, reactive } from 'vue';
export default {
name: 'StyleBinding',
setup() {
const title = ref('Hello Vue3!');
const titleStyles = reactive({
color: 'red',
fontSize: '24px'
});
const primaryButton = ref(true);
const isDisabled = ref(false);
return {
title,
titleStyles,
primaryButton,
isDisabled
};
}
};
</script>
```使用心得：
在Vue3中，我们可以使用不同的方式来绑定样式。内联样式绑定允许我们在模板中直接设置元素的样式，而Class属性的数组语法允许我们动态绑定CSS类名。
在示例代码中，我们首先使用`:style`来绑定一个响应式的`titleStyles`对象，该对象中包含了一些内联样式的属性。当`titleStyles`发生变化时，文本标题的样式也会自动更新。
接着，我们使用`:class`来绑定一个数组，数组中的第一个元素是一个条件表达式，根据`primaryButton`的值来决定是使用'primary'类还是'secondary'类。第二个元素是一个对象，对象的属性名表示类名，属性值表示是否要应用该类名。当`primaryButton`或`isDisabled`的值发生变化时，按钮的类名也会自动更新。
使用内联样式绑定和Class属性的数组语法可以很方便地进行样式的动态绑定。我们可以根据需要，根据不同的条件来设置不同的样式或类名，从而实现更灵活的样式控制。
开发过程中遇到的问题和解决的bug：
1. 问题：在内联样式中使用JavaScript表达式时，语法错误导致样式无效。
解决方案：确保在内联样式中使用正确的JavaScript表达式，并注意语法错误。
2. 问题：在使用Class属性的数组语法时，不正确地设置类名数组导致无法正确应用样式。
解决方案：确保在Class属性的数组语法中正确设置类名数组，特别是在使用条件表达式时，确保表达式返回正确的类名。
3. 问题：在动态绑定样式时，由于样式名称的格式不正确，导致样式无法生效。
解决方案：确保在绑定样式时使用正确的样式名称，遵循CSS的命名规范，并注意大小写。
Note: 以上内容为笔记，非官方文档