vue动态绑定class

最新推荐文章于 2025-01-06 08:22:14 发布

qq_34629527

最新推荐文章于 2025-01-06 08:22:14 发布

阅读量131

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_34629527/article/details/129069685

版权

博客主要介绍了Vue中绑定class的方法，包括对象方法和数组写法。对象方法用花括号包裹，类名用引号引起来，有多个参数；数组写法可与三元运算符结合，还介绍了其他写法。

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

1、对象方法
用花括号{}包裹起来，类名用引号引起来
第一个参数是类名，第二个参数是boolean值

<div :class="{'class1':isShow}"></div>

在这里插入图片描述

还可以这样写：

 <div :class="{'class1':isShow==1}"></div>
  <div :class="{'class1':isShow==index}"></div>

也可以写多个：

<div :class="{'class1':isShow2==1,'class2':isShow2==2}"></div>

2、数组写法
在这里插入图片描述
数组与三元运算符结合绑定class：

还可以这样写：

       <div :class="[showWihch?'class1':'']"></div>
       <div :class="[showWihch?'class1':'class2']"></div>
       <div :class="[showWihch==1?'class1':'class2']"></div>
       <div :class="[showWihch<1?'class1':'class2']"></div>
       <div :class="[{'isshow':true},'class2']"></div>