Vue样式绑定

news2024/9/19 21:24:33

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>