<template>
<div class="home">
<!-- 类名 判断是否添加的条件 -->
<!-- <div class="div" :class="{'color':flag}"></div> -->
<!-- 三目运算 -->
<!-- <div class="div" :class="flag?'color':''"></div> -->
<!-- 数组: data中的属性 -->
<div :class="[ifwidth,ifcolor]"></div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
// HelloWorld
},
data() {
return {
// 对象添加类名
flag:true,
// 数组添加类名
// 属性:类名
ifwidth:'div1',
ifcolor:'color1'
}
}
}
</script>
<style lang="scss">
.div {
width: 100px;
height: 100px;
background: red;
}
// 对象
.color {
width: 200px;
height
动态添加类 动态添加样式 ref获取dom
于 2022-05-08 16:29:17 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)