vue绑定class的三种写法

最新推荐文章于 2023-05-24 12:04:02 发布

Miss_Mr_Rui

最新推荐文章于 2023-05-24 12:04:02 发布

阅读量243

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/a791226606/article/details/128420437

版权

<template>
  <div>
    <!-- 字符串写法 -->
    <span :class="classStr"></span>
    <!-- 数组写法 -->
    <span :class="classArr"></span>
    <!-- 对象写法 -->
    <span :class="classObj"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classString: 'myClass',
      classArr: ['myClass1', 'myClass2', 'myClass3'],
      classObj: {
        myClass1: false,
        myClass2: true,
        myClass3: false,
      }
    };
  }
};
</script>
<style>
.myClass {}

.myClass1 {}

.myClass2 {}

.myClass3 {}
</style>