今天在寫vue項目的時候，遇到了一個奇怪的錯誤——“CSS Syntax Error”。

<template>
<div :class="{'my-class': isMyClass}">
<p>Hello World</p>
</div>
</template>
<script>
export default {
data() {
return {
isMyClass: true
}
}
}
</script>
<style>
.my-class {
background: red;
}
</style>

從代碼中可以看出，我們使用了一個變量isMyClass來動態修改class，同時對應的css樣式寫在了style標簽里。

然而，當我們運行代碼的時候，卻發現頁面上的樣式沒有生效，同時console控制臺中輸出了“CSS Syntax Error”的報錯信息。

通過查閱資料，我們發現原因是我們在vue組件中，不能直接使用冒號綁定class的方法。正確的做法是使用v-bind:class指令。

<template>
<div v-bind:class="{'my-class': isMyClass}">
<p>Hello World</p>
</div>
</template>
<script>
export default {
data() {
return {
isMyClass: true
}
}
}
</script>
<style>
.my-class {
background: red;
}
</style>

通過這個小例子，我們了解到了vue中遇到CSS Syntax Error報錯時的解決辦法。