Vue动态类的几种使用方法

待我称王封你为后i 2022-02-24 05:10 461阅读 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 条评论，461人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 js 创建类和继承的几种方法

在面向对象编程中，类（class）是对象（object）的模板，定义了同一组对象（又称"实例"）共有的属性和方法。JavaScript语言里是没有类的概念的，但是我们通过以下方

爱被打了一巴掌/ 2022年04月10日 06:47/ 0 赞/ 287 阅读

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

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

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

相关 vue使用class添加动态类

<template> <d2-container> <h3>class使用测试页面</h3> <p :class="1 <

我会带着你远行/ 2021年07月26日 12:35/ 0 赞/ 423 阅读