1. 綁定 HTML class
①通過class名稱的bool值判斷樣式是否被啟用

<template><!--通過樣式名稱是否顯示控制樣式--><div :class="{ haveBorder: p.isBorder, 'haveBackground-color': p.isBackgroundcolor }">此處是樣式展示區域</div><br /><button @click="addBorder">增加邊框</button><br /><button @click="addBackgroundcolor">增加背景顏色</button>
</template>
<script setup>
//從vue中獲取ref方法
import { reactive } from "vue";name: "App";
//利用v-bind的bool值控制class調用的樣式名稱是否顯示
let p = reactive({isBorder: false,isBackgroundcolor: false,
});
function addBorder() {p.isBorder = true;
}
function addBackgroundcolor() {p.isBackgroundcolor = true;
}
</script><style scoped>
.haveBorder {border: 1px solid #000000;
}
.haveBackground-color {background-color: aqua;
}
</style>

②樣式名稱在對象中,html中調用定義的對象

<template><!--通過樣式名稱是否顯示控制樣式--><div :class="classObject ">此處是樣式展示區域</div><br /><button @click="addBorder">增加邊框</button>
</template>
<script setup>
//從vue中獲取ref方法
import { reactive } from "vue";name: "App";
//利用bool值控制class調用的樣式名稱是否顯示(樣式設置成對象)
let classObject  = reactive({haveBorder: false,
});
function addBorder() {classObject.haveBorder = true;
}
</script><style scoped>
.haveBorder {border: 1px solid #000000;
}
</style>

③通過數組綁定

<template><!--通過樣式名稱是否顯示控制樣式--><div :class="[arrayBorder,arrayBackgroundColor]">此處是樣式展示區域</div>
</template>
<script setup>
//從vue中獲取ref方法
import { ref } from "vue";name: "App";
//利用數組綁定樣式
let arrayBorder=ref('haveBorder')
let arrayBackgroundColor=ref('haveBackground-color')
</script><style scoped>
.haveBorder {border: 1px solid #000000;
}
.haveBackground-color {background-color: aqua;
}
</style>

④在組件上使用
父組件

<template><!--通過樣式名稱是否顯示控制樣式--><classtest :class="[arrayBorder, arrayBackgroundColor]" />
</template>
<script >
//從vue中獲取ref方法
import { ref } from "vue";
import classtest from "./components/classtest.vue";export default {name: "App",components:{classtest},//利用數組綁定樣式setup() {let arrayBorder = ref("haveBorder");let arrayBackgroundColor = ref("haveBackground-color");return{arrayBorder,arrayBackgroundColor}},
};
</script><style scoped></style>

子組件

<template><!--因為有多個根元素所以使用$attrs屬性實現指定接受父組件樣式--><!--多個根元素情況使用父組件傳入的樣式名稱,需在子組件定義樣式--><div :class="$attrs.class">此處是樣式展示區域</div><div>此處不接受父組件傳過來的class</div>
</template><script>
export default {name:'classtest'
}
</script><style>
.haveBorder {border: 1px solid #000000;
}
.haveBackground-color {background-color: aqua;
}
</style>

2. 綁定內聯樣式

<template><div :style="{ border: borderStyle, 'background-color': backgroundcolorStyle }">此處是樣式展示區域</div><br><div :style="{styleObject , 'font-size':fontSize + 'px'}">此處是樣式展示區域</div><br><!--你可以對一個樣式屬性提供多個 (不同前綴的) 值--><div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
</template>
<script setup>
//從vue中獲取ref方法
import { ref,reactive } from "vue";name: "App";
//利用數組綁定樣式
let borderStyle=ref('1px solid #000000')
let backgroundcolorStyle=ref('aqua')//定義對象形式style
let styleObject =reactive({border:'1px solid #000000'
})//定義字體大小
let fontSize=ref(30)
</script><style scoped></style>