当前位置：首页 > VUE

vue卡片样式切换实现

2026-02-21 20:21:30VUE

实现 Vue 卡片样式切换的方法

动态类名绑定

通过 v-bind:class 动态绑定类名，根据条件切换样式。例如，点击按钮切换卡片背景色：

<template>
  <div 
    class="card" 
    :class="{ 'active-card': isActive }"
    @click="toggleCard"
  >
    {{ cardContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      cardContent: '点击切换样式'
    };
  },
  methods: {
    toggleCard() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.card {
  width: 200px;
  padding: 20px;
  background: #f0f0f0;
  transition: background 0.3s;
}
.active-card {
  background: #42b983;
}
</style>

使用计算属性

通过计算属性返回动态样式对象，适合复杂条件判断：

vue卡片样式切换实现

<template>
  <div 
    class="card" 
    :class="cardClass"
    @click="toggleCard"
  >
    {{ cardContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      cardContent: '计算属性控制样式'
    };
  },
  computed: {
    cardClass() {
      return {
        'active-card': this.isActive,
        'large-font': this.isActive
      };
    }
  },
  methods: {
    toggleCard() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.large-font {
  font-size: 18px;
}
</style>

内联样式绑定

直接通过 v-bind:style 绑定样式对象，适合需要动态计算的样式：

vue卡片样式切换实现

<template>
  <div 
    class="card" 
    :style="cardStyle"
    @click="changeColor"
  >
    内联样式切换
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardStyle: {
        backgroundColor: '#f0f0f0',
        color: '#333'
      }
    };
  },
  methods: {
    changeColor() {
      this.cardStyle.backgroundColor = 
        this.cardStyle.backgroundColor === '#f0f0f0' ? '#ff7043' : '#f0f0f0';
    }
  }
};
</script>

使用 CSS 变量

结合 Vue 响应式数据和 CSS 变量实现动态样式：

<template>
  <div 
    class="card css-vars-card"
    @click="toggleTheme"
  >
    CSS 变量控制样式
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false
    };
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark;
      document.documentElement.style.setProperty(
        '--card-bg', 
        this.isDark ? '#2c3e50' : '#ffffff'
      );
    }
  }
};
</script>

<style>
:root {
  --card-bg: #ffffff;
}
.css-vars-card {
  background: var(--card-bg);
  transition: background 0.3s;
}
</style>

第三方动画库

结合 transition 或 animate.css 实现样式切换动画：

<template>
  <transition name="fade">
    <div 
      class="card" 
      v-if="showCard"
      @click="hideCard"
    >
      点击隐藏卡片（带动画）
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showCard: true
    };
  },
  methods: {
    hideCard() {
      this.showCard = !this.showCard;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>