Vue样式绑定

1. 绑定 HTML class
①通过class名称的bool值判断样式是否被启用

<template><!--通过样式名称是否显示控制样式--><div :class="{ haveBorder: p.isBorder, 'haveBackground-color': p.isBackgroundcolor }">此处是样式展示区域</div><br /><button @click="addBorder">增加边框</button><br /><button @click="addBackgroundcolor">增加背景颜色</button>
</template>
<script setup>
//从vue中获取ref方法
import { reactive } from "vue";name: "App";
//利用v-bind的bool值控制class调用的样式名称是否显示
let p = reactive({isBorder: false,isBackgroundcolor: false,
});
function addBorder() {p.isBorder = true;
}
function addBackgroundcolor() {p.isBackgroundcolor = true;
}
</script><style scoped>
.haveBorder {border: 1px solid #000000;
}
.haveBackground-color {background-color: aqua;
}
</style>

在这里插入图片描述
②样式名称在对象中,html中调用定义的对象

<template><!--通过样式名称是否显示控制样式--><div :class="classObject ">此处是样式展示区域</div><br /><button @click="addBorder">增加边框</button>
</template>
<script setup>
//从vue中获取ref方法
import { reactive } from "vue";name: "App";
//利用bool值控制class调用的样式名称是否显示(样式设置成对象)
let classObject  = reactive({haveBorder: false,
});
function addBorder() {classObject.haveBorder = true;
}
</script><style scoped>
.haveBorder {border: 1px solid #000000;
}
</style>

在这里插入图片描述
③通过数组绑定

<template><!--通过样式名称是否显示控制样式--><div :class="[arrayBorder,arrayBackgroundColor]">此处是样式展示区域</div>
</template>
<script setup>
//从vue中获取ref方法
import { ref } from "vue";name: "App";
//利用数组绑定样式
let arrayBorder=ref('haveBorder')
let arrayBackgroundColor=ref('haveBackground-color')
</script><style scoped>
.haveBorder {border: 1px solid #000000;
}
.haveBackground-color {background-color: aqua;
}
</style>

在这里插入图片描述
④在组件上使用
父组件

<template><!--通过样式名称是否显示控制样式--><classtest :class="[arrayBorder, arrayBackgroundColor]" />
</template>
<script >
//从vue中获取ref方法
import { ref } from "vue";
import classtest from "./components/classtest.vue";export default {name: "App",components:{classtest},//利用数组绑定样式setup() {let arrayBorder = ref("haveBorder");let arrayBackgroundColor = ref("haveBackground-color");return{arrayBorder,arrayBackgroundColor}},
};
</script><style scoped></style>

子组件

<template><!--因为有多个根元素所以使用$attrs属性实现指定接受父组件样式--><!--多个根元素情况使用父组件传入的样式名称,需在子组件定义样式--><div :class="$attrs.class">此处是样式展示区域</div><div>此处不接受父组件传过来的class</div>
</template><script>
export default {name:'classtest'
}
</script><style>
.haveBorder {border: 1px solid #000000;
}
.haveBackground-color {background-color: aqua;
}
</style>

在这里插入图片描述

2. 绑定内联样式

<template><div :style="{ border: borderStyle, 'background-color': backgroundcolorStyle }">此处是样式展示区域</div><br><div :style="{styleObject , 'font-size':fontSize + 'px'}">此处是样式展示区域</div><br><!--你可以对一个样式属性提供多个 (不同前缀的) 值--><div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
</template>
<script setup>
//从vue中获取ref方法
import { ref,reactive } from "vue";name: "App";
//利用数组绑定样式
let borderStyle=ref('1px solid #000000')
let backgroundcolorStyle=ref('aqua')//定义对象形式style
let styleObject =reactive({border:'1px solid #000000'
})//定义字体大小
let fontSize=ref(30)
</script><style scoped></style>