vue3动态类属性最优雅简洁

最新推荐文章于 2024-11-19 03:52:08 发布

皛心

最新推荐文章于 2024-11-19 03:52:08 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/m0_47670683/article/details/129374846

版权

前端专栏收录该内容

17 篇文章

订阅专栏

文章介绍了如何在Vue中利用ref和模板语法的条件类绑定来实现内容的动态样式切换。通过定义一个ref布尔值变量isRed，结合`:class`指令，实现了点击按钮时切换h1元素的红色文本效果。当isRed为true时，元素添加.isRed类，显示红色文本，反之则不显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候遇到某些内容需要根据用户需要切换是否加.class，我看到有很多地方用3元表达式来做切换，我想到一种既直观又简洁优雅的方式。
先看代码：

<script setup>
import { ref } from 'vue'

const isRed = ref(true)

</script>

<template>
  <button @click="isRed = !isRed">切换</button>

	<h1 :class="{isRed}">Vue is awesome!</h1>
</template>
<style>
  .isRed{
    color:red
  }
 </style>

isRed在style里是类属性名，在script里是布尔值。在template里会判断isRed，为true时就会加上类属性isRed，为false时不会加上类属性isRed，注意:class="{isRed}"的花括号不能漏写，漏了花括号就不会生效。