vue文件中怎么修改html或者body的样式
时间: 2024-03-22 09:37:43 浏览: 14
在Vue文件中修改HTML或者body的样式,可以使用Vue的样式绑定(v-bind:class)或者内联样式(style属性)。
1. 样式绑定(v-bind:class):可以绑定一个对象或数组,根据条件动态绑定class。
例如,绑定一个 class 为 red 的样式:
```
<template>
<div v-bind:class="{ red: isRed }">hello world</div>
</template>
<script>
export default {
data() {
return {
isRed: true // 根据条件来决定绑定的样式
}
}
}
</script>
<style>
.red {
color: red;
}
</style>
```
2. 内联样式(style属性):可以使用对象语法或者数组语法来绑定内联样式。
例如,绑定一个颜色为红色的内联样式:
```
<template>
<div :style="{ color: 'red' }">hello world</div>
</template>
```
或者使用数组语法:
```
<template>
<div :style="[styleObj1, styleObj2]">hello world</div>
</template>
<script>
export default {
data() {
return {
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '24px'
}
}
}
}
</script>
```
注意:如果要修改 body 的样式,需要在 index.html 文件中进行修改,例如:
```
<style>
body {
background-color: blue;
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)