首页 > 其他分享 >012.Vue3入门,class属性的几种绑定方法

012.Vue3入门,class属性的几种绑定方法

时间:2024-08-10 21:38:01浏览次数:10  
标签:danger 样式 text 绑定 class 012 Vue3 active Class

1、代码如下:

<template>
  <h3>class绑定</h3>
  <div :class="{ 'active':isActive , 'text-danger':hasError }">Class样式绑定1</div>
  <div :class="classObject">Class样式绑定2</div>
  <div :class="[arrActive,arrHasError]">Class样式绑定3</div>
  <div :class="[isActive ? 'active text-danger' : '']">Class样式绑定4</div>
  <div :class="[isActive ? 'active':'',{'text-danger':hasError}]">Class样式绑定5</div>

</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      classObject: {
        active: true,
        'text-danger': true
      },
      arrActive: "active",
      arrHasError: "text-danger"
    }
  }
}
</script>

<style>
.active {
  font-size: 30px;
}

.text-danger {
  color: red;
}
</style>

2、效果如下:

 

标签:danger,样式,text,绑定,class,012,Vue3,active,Class
From: https://www.cnblogs.com/tianpan2019/p/18352809

相关文章