vue通过响应式变量控制元素class名

news/2024/7/10 1:47:50 标签: vue

例如 此时我们data中有一个isApp变量 值为 true/false 我们希望 当isApp为true时 给div添加 类名 app

data(){
    return{
        isApp: true
    }
}

比较简单的写法就是

<div :class = "isApp == true?'app':''"></div>

这样写看着比较捞 而且当你元素有很多类名时 就很不好用了

我们可以这样写

<div v-bind:class="{app:isApp == true}"></div>

看着就比较美观 而且最大的好处还是不影响其他类名

因为在同一块元素上 v-bind:class 和 class并不冲突 完全可以一起用


http://www.niftyadmin.cn/n/1036650.html

相关文章

java 简单了解spring之(IOC过程)

本文章为 java 简单了解spring之(IOC容器) 首选 我们需要xml文件配置文件 配置创建对象 这一块 我们的文章 java 手把手带你创建一个spring入门案例 也是一个具体的实现 第二步 创建工厂类 管理类对象 然后通过xml 解析 获取类路径 然后 通过反射创建对象 然后反射创建后 还是…

element ui 树形横向超出没有滚动条问题解决

如果你是全局设 这样就行 <style> .el-tree{.el-tree-node__content{display: block!important;}.el-tree-node__children{overflow: visible!important;} } </style>或者 用一下样式穿透喽

了解索引结构分类和他们对存续引擎的支持情况

查看本文需要您的索引概念有一个基本了解 如果您之前没有了解过 可以观看我的文章 MySQL索引概述 首先 通过结构图 我们会知道 索引是在存储引擎层实现的 所以得出 根据存储引擎的不同 索引的结构 也会有所不同 索引结构主要是一下四种 首先 第一种 B树索引 这是大部分储存引…

JavaScrip通过一个字节数值,自动计算出文件大小单位的函数

首先 我们要接收一个纯数值的 字节大小值 这个就要后台给你了 然后 如果您对文件的单位进制不是很了解 可以看一下我的文章 文件大小计算单位 然后 我们直接上代码 IdentificationUnit (size) > {if(Number(size)){if((Number(size) / 1024) > 1){size (Number(size…

element ui弹窗因为父元素定位优先级被黑色区域挡住 (在不修改父元素优先级前提下解决)

有时 我们可能因为减低了弹出框的父元素的优先级 导致弹出框被后面的背景黑色覆盖 但可能我们降低他父元素的优先级也是有原因的 不太适合去改父元素的优先级 我们可以我修改 <el-dialogtitle"弹窗名称":visible.sync"dialogSearchVisible"center:clo…

java spring IOC Bean作用域

spring 的bean中 是可以设置创建单实例 或 多实例 两句话 1 bean的作用域 就是bean创建单实例 或 创建多实例 2 在你不对bean作用域做任何处理时 他是默认创建单实例的 那么 我们先代码演示 一下 我们先创建一个java项目 然后引入spring 的基本依赖 然后在项目的src下创建 c…

Failed to read candidate component class: file

问题会发生在 spring 使用注解的情况下发生 原因是 当前 使用的spring的版本 不被 你当前使用的JDK版本支持 这个 可以去找一下spring 与JDK的对应版本 然后再做处理

PAT甲级题库题解1001

准备三月份的PAT记录每天的题解 PAT甲级1001 #include<bits/stdc.h> using namespace std;int main(void) {freopen("pat0314/in.txt","r",stdin);int a,b;cin>>a>>b;int c a b;if(c < 0){printf("-");c -c;if(c < …