vue class 与 style 绑定

绑定一个返回对象的计算属性

const isActive = ref(true);
const error = ref(null);

const classObject = computed(() => ({
    active: isActive.value && !error.value,
    'text-danger': error.value && error.value.type === 'fatal'
}));

1	<div :class="classObject"></div>

子组件继承父组件传入的class

有一个根元素的组件

子组件的根元素，在渲染时会添加父组件的 class。

有多个根元素的组件

子组件中 :class='$attrs.class' 的根元素，在渲染时会添加父组件的 class。

1
2
3

<!-- 子组件 MyComponent.vue -->
<p :class="$attrs.class">one root element</p>
<span>another root element</span>

1 2	<!-- 父组件 --> <MyComponent class="fatherClass"/>

渲染后结果：

1 2	<p class="fatherClass">one root element</p> <span>another root element</span>

內联样式

绑定对象

const styleObject = reactive({
    color: "red",
    fontSize: "13px"
});

1	<div :style="styleObject"></div>

绑定对象数组

1	<div :style="[baseStyle, overriddingStyle]"></div>

const baseStyle = reactive({
    color: "red",
    ...
});
const overriddingStyle = reactive({
    color: "black",
    ...
});