Vue3-学习记录-04 类与样式绑定

类与样式的绑定

绑定HTML class

通过 :class(v-bind:class 的缩写) 传递一个对象来切换class：

<script setup lang='ts'>
import { ref } from "vue";
const isRed = ref<boolean>(true);

const classObject = reactive({ active: true, 'text-danger': false })

</script>

<template>
<div :class="{ active: isActive }"></div>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }">
    我要变背景
  </div>
  <div :class="classObject"></div>
</template>

绑定计算属性

<script  setup lang='ts'>
const isActive = ref<boolean>(true);
const error = ref(null);
const classObject = computed(() => ({
  active: isActive.value && !error.value,
  "text-danger": error.value,
}));
</script>

<template>
 <div :class="classObject">绑定计算属性</div>
</template>

绑定数组

<script setup>
const activeClass = ref('active')
const errorClass = ref('text-danger')
</script>

<template>
  <div :class="[activeClass, errorClass]">绑定数组</div>
  <div :class="[{activeClass: isActive}, errorClass]">绑定数组</div>
</template>

在组件上使用

当在组件上使用class时，如果组件内部只有一个根元素，组件的class会被继承给根元素的class上(添加的形式)，如果是多个根元素可以通过$attrs属性来指定：

// 只有一个根元素时
//继承前
<p class="foo bar">Hi!</p>
// 使用组件时添加class，组件上可以实现上述绑定
<MyComponent class="baz boo" />
//渲染出的HTML
<p class="foo bar baz boo">Hi</p>

//多个根元素时
//通过$attrs 来指定
<p :class="$attrs.class">Hi!</p> 
<span>This is a child component</span>
//渲染出的HTML
<p class="baz boo">Hi!</p> <span>This is a child component</span>

绑定内联样式

通过:style对应的是HTML元素的 style 属性,

//直接绑定
const activeColor = ref('red') 
const fontSize = ref(30)

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div :style="{ 'font-size': fontSize + 'px' }"></div>

//绑定对象来实现
const styleObject = reactive({ color: 'red', fontSize: '13px' })
<div :style="styleObject"></div>

//绑定数组
<div :style="[baseStyles, overridingStyles]"></div>

//样式多值
//数组仅会渲染浏览器支持的最后一个值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>