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>
