Vue是當(dāng)前前端開發(fā)大環(huán)境中最熱門的架構(gòu)之一，而css又是必不可少的樣式定義語言，下面介紹vue中css的寫法。

在vue項目中，在template中添加樣式時，有兩種寫法。第一種是將樣式寫在style標(biāo)簽中，前面添加一個scoped屬性，表示該樣式只作用于當(dāng)前組件中的元素。

<template><div>
<h1>Hello World!</h1>
</div></template><style scoped>h1 {
color: red;
}</style>

第二種寫法是將樣式寫在外部樣式表中，用link標(biāo)簽引入，在組件里通過class屬性綁定一個class名。

<template><div class="red-title">
<h1>Hello World!</h1>
</div></template><link rel="stylesheet" href="./style.css">

//style.css.red-title h1 {
color: red;
}

在vue中，如果需要使用動態(tài)綁定樣式的方法，可以使用v-bind:style屬性，該屬性綁定一個js對象，對象內(nèi)部定義樣式屬性名和屬性值即可。

<template><div v-bind:style="{color: textColor}">
<h1>Hello World!</h1>
</div></template><script>export default {
data() {
return {
textColor: "red"
}
}
}</script>

以上就是vue中css的相關(guān)寫法，希望對大家有所幫助。