Vue3 样式绑定: 内联样式与Class属性的数组语法

Vue3 样式绑定: 内联样式与Class属性的数组语法

示例代码：

```vue
<template>
<div>
<!-- 内联样式绑定 -->
<h1 :style="titleStyles">{{ title }}</h1>
<!-- Class属性的数组语法 -->
<button :class="[primaryButton ? 'primary' : 'secondary', { disabled: isDisabled }]">Submit</button>
</div>
</template>
<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: 以上内容为笔记，非官方文档