vue在style标签里面动态添加
时间: 2023-11-08 08:11:23 浏览: 118
详解.vue文件中style标签的几个标识符
CSS样式有两种方式:
1. 在组件中使用一个变量来存储CSS样式,并在样式标签中使用这个变量。
例如:
```
<template>
<div :style="myStyle">Hello World</div>
</template>
<script>
export default {
data() {
return {
myStyle: {
color: "red",
fontSize: "20px",
fontWeight: "bold"
}
};
}
};
</script>
<style>
</style>
```
2. 使用计算属性来动态生成CSS样式,并在样式标签中使用计算属性。
例如:
```
<template>
<div :style="myStyle">Hello World</div>
</template>
<script>
export default {
computed: {
myStyle() {
return {
color: this.color,
fontSize: this.fontSize,
fontWeight: this.fontWeight
};
},
color() {
return "red";
},
fontSize() {
return "20px";
},
fontWeight() {
return "bold";
}
}
};
</script>
<style>
</style>
```
阅读全文