Vue 動態創建 style

在前端開發中，我們經常需要為一個網頁添加 CSS 樣式。而在 Vue 中，我們可以使用<style>標簽來添加樣式，也可以使用動態綁定來動態添加樣式。

動態綁定 style

<template>
<div :style="{color: textColor}">
Hello, world!
</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red'
}
}
}
</script>

在上面的例子中，我們使用了:style動態綁定的方式來設置 div 的顏色。由于:style接受一個 JavaScript 對象作為參數，我們可以在對象中添加多個屬性來設置不同的樣式。

例如：

<template>
<div :style="{color: textColor, fontSize: textSize}">
Hello, world!
</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
textSize: '20px'
}
}
}
</script>

在上面的例子中，我們還使用了兩個數據屬性來設置顏色和字體大小。

動態創建 style 標簽

有時候，我們需要使用動態創建<style>標簽的方式來添加樣式。這種方式在我們需要添加一些動態的樣式時非常有用。

<template>
<div ref="myDiv">Hello, world!</div>
</template>
<script>
export default {
mounted() {
const myDiv = this.$refs.myDiv;
const style = document.createElement('style');
style.innerText = `
div {
color: red;
}
`;
myDiv.appendChild(style);
}
}
</script>

在上面的例子中，我們在mounted()鉤子函數中動態創建了一個<style>標簽，然后將其添加到了組件的 DOM 中。

需要注意的是，我們不能直接使用<style>標簽來作為動態創建樣式的容器，需要使用document.createElement('style')來創建一個新的<style>標簽。

總結

在 Vue 中，我們可以使用動態綁定的方式來動態添加樣式，也可以使用動態創建<style>標簽的方式來實現動態樣式的添加。這兩種方法非常靈活，并且可以根據實際需要選擇合適的方式。