Vue动态类的几种使用方法

待我称王封你为后i 2022-02-24 05:10 474阅读 0赞

## 前言：动态类的操作比较简单，但是很实用。 ##

### 一、点击显示或隐藏样式的做法 ###

*  利用带数据绑定

<button @click="isShow = !isShow">点击</button>
    <div :class="{ colorRed: isShow }">哈哈哈</div>

data() { 
      return { 
      isShow: true
    }

.colorRed { 
    	color:red;
    }
    .colorBlue{ 
    	color:blue;
    }

*  代码含义：当isShow 为true时，添加类名colorRed ，div字体为红色，渲染结果如下：

<div class="colorRed ">哈哈哈</div>

### 二、利用三元表达式切换样式 ###

*  控制isShow 切换样式

<div :class="[isShow ?'colorRed':'colorBlue']">哈哈哈</div>

### 三、多个动态类的用法 ###

**案例 ： 用带有图标的按钮展开列表和收起列表**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

<i :class="{ 'el-icon-d-arrow-left':!menuIsShow,'el-icon-d-arrow-right': menuIsShow}" class="el-icon-d-arrow-left openMenu" @click="menuIsShow=!menuIsShow">
    </i>

*  el-icon-d-arrow-left 是 element自带的字体图标

data() { 
        return { 
          menuIsShow: false
        };
      },

## 总结：利用动态类可以节省很多代码，实现更复杂的功能。 ##

![在这里插入图片描述][20190403101927539.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20220224/b98d9d93357642f8b5240e419861d308.png
[20190403101927539.jpg_pic_center]: /images/20220224/19a3426e90de4482bbe7a99d2542d8cd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-几种插槽(slot)的使用

插槽(slot) 插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式一共有三种分类：默认插槽、具名插槽、作用域插

悠悠/ 2023年10月12日 19:37/ 0 赞/ 45 阅读

相关类——导入模块示例——导入类的几种方法

car.py class Car(): '''一次模拟汽车的简单尝试''' def __init__(self,make,m

以你之姓@/ 2023年10月02日 08:54/ 0 赞/ 10 阅读

相关 Less的几种使用方法

在Vue中使用Less 1、安装依赖处理普通的.css 文件，需要安装css-loader,style-loader 　　　　.less 文件，需要安装 le

青旅半醒/ 2023年07月06日 14:37/ 0 赞/ 15 阅读

相关【Vue】--关于 vue动态绑定class的几种方式

\\\\\对象方法 \-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）：class=“{‘active’:isTrue}”

逃离我推掉我的手/ 2023年06月02日 13:58/ 0 赞/ 6 阅读

相关 Vue组建通信的几种方法

组件通信一 —— props和$emit props和$emit 父组件向子组件传递数据用 props 子组件向父组件传递数据用 $emit 父组件

布满荆棘的人生/ 2022年12月18日 06:55/ 0 赞/ 149 阅读

相关 vue-cli4使用svg图标的几种方法

方法一：（svg文件夹必须放在src目录下面）使用vue-svg-icon插件。[详解请参考博客][Link 1] 方法二：（svg文件夹放在assets目录下面）

今天药忘吃喽~/ 2022年12月05日 09:51/ 0 赞/ 174 阅读

相关 Vue中定义模板的几种方法

指定模板 Vue实例的模板在Vue实例的选项·template·中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中

淩亂°似流年/ 2022年12月04日 01:27/ 0 赞/ 498 阅读

相关 vue跳转页面常用的几种方法

vue跳转页面有好几种不同方法，下面将通过实例代码给大家介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。 1：router-link跳转

水深无声/ 2022年10月19日 04:17/ 0 赞/ 231 阅读

相关禁用页面缓存的几种方法（静态和动态）

　1、在Asp页面首部<head>加入 <table style="padding:0px; margin:0px; border:1px dotted rgb(

以你之姓@/ 2022年09月17日 11:26/ 0 赞/ 182 阅读

相关 Vue动态类的几种使用方法

前言：动态类的操作比较简单，但是很实用。一、点击显示或隐藏样式的做法利用带数据绑定 <button @click="isShow = !isSh

待我称王封你为后i/ 2022年02月24日 05:10/ 0 赞/ 475 阅读