vue动态绑定类样式ClassName知多少

对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满足不了。

想起之前微信小程序中动态添加类样式的方式是这样的 class='item good {{isEdit?"isEdit":""}}',那么vue中应该也有一种写法能够同时添加指定类样式与数据源中的类样式。

然后就去查了些资料做了下整理,汇总了下vue中动态添加类样式多种用法:

一. 绑定字符串(不建议使用)

<div :class=" 'classA classB' ">Demo1</div>

二. 绑定数据变量:

<div :class="classA">Demo2</div>
data: {classA: 'class-a'  //当classA改变时将更新class
}

写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class接受三目运算:

<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

三. 绑定对象:

<div :class="{ 'class-a': true, 'class-b': false}">Demo4</div>

四. 绑定数组:

<div :class="[classA, classB]">Demo7</div>

对于绑定 数组这种用法,拓展性就比较大了,可以综合上边多种组合使用,如下:

<li v-for="item in navData" :class="[{'layui-this':currentRouter==item.router},item.class]" >

 

转载于:https://www.cnblogs.com/xyyt/p/8777724.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/398333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#深入浅出 关键字(一)

1.thisthis关键字用于指示当前对象“自己”&#xff0c;来看一个例子&#xff0c;了解什么时候需要用thisclass Star{String name;int age;public void SetInfo(string name,int age){name name;//注意此处的赋值age age;//}public void Show(){Console.WriteLine(name"…

利用platform库获取浏览器和操作系统版本

原生方法检测 网站获取用户的浏览器和操作系统版本是一个很常见的需求&#xff0c;但是细说起来这个功能的实现并不简单。一般情况下有两种思路。 一是利用用户代理UserAgent来判断浏览器和OS的版本&#xff0c;因为各个平台和浏览器的UA都不一样。但是这种方法存在一个局限性&…

linux桌面lxde 安装_观点|最新精简型 Linux 桌面环境大比拼:LXDE Vs. Xfce Vs. MATE

对于相当一部分 Linux 用户而言&#xff0c;性能永远是其追求的终极目标。无论他们使用的计算机已经太过陈旧&#xff0c;需要尽量发掘其中的有限潜能&#xff0c;还是希望凭借手中崭新的高性能系统承载全部高强度任务负载&#xff0c;让一切保持简洁。这些都是实现性能保障的重…

Android SQLite详解

在项目开发中&#xff0c;我们或多或少都会用到数据库。在Android中&#xff0c;我们一般使用SQLite&#xff0c;因为Android在android.database.sqlite包封装了很多SQLite操作的API。我自己写了一个Demo来总结SQLite的使用&#xff0c;托管在Github上&#xff0c;大家可以点击…

Catalan数的理解

Catalan数的理解 f(0)1f(1)1f(2)2f(3)5f(4)14f(5)42f(2)f(1)f(1)f(3)f(2)f(1)*f(1)*f(2)f(4)f(3)f(2)*f(1)f(1)*f(2)f(3)通项公式&#xff1a;f(n) f(n-1) f(n-2)f(1) f(n-3)f(2) ... f(1)f(n-2) f(n-1) 理解&#xff1a;固定一个&#xff0c;n-1个全在左边&#xff0c;n-…

Type interface mapper.UserMapper is not known to the MapperRegistry

Type interface mapper.UserMapper is not known to the MapperRegistry. 报错&#xff1a;Type interface mapper.UserMapper is not known to the MapperRegistry. 解决&#xff1a;已经解决&#xff1b;请查看mapper是否配置正确&#xff0c;我下面就配置错误了。 解决效果…

我看objective-C --不要把objC当做c/c++的超集

--不要把objC当做c/c的超集 我承认看objective-C的时间不是很长&#xff0c;连apple官网的objCpdf都没看完。 但是我已经感觉到很多介绍objC文章都说过的一句话是在误导初学者。那句话 就是objective-C是 c/c语言的超集。 我们在学与c/c相关的语言的时候很自然的想到java、c#这…

微信整人假红包图片_警惕:千万别点!这些红包是假的

春节将至&#xff0c;又到了“考验手速”的时候。近年春节&#xff0c;“抢红包”为大家带来了“新年味”与许多快乐。但是&#xff0c;有些不法分子却从中捣乱&#xff0c;制造了一些假红包企图骗取钱财。如何辨别“假红包”&#xff1f;这里总结了几种“假红包”类型&#xf…

SQL Server中SCAN 和SEEK的区别

SQL Server中SCAN 和SEEK的区别 SQL SERVER使用扫描&#xff08;scan&#xff09;和查找&#xff08;seek&#xff09;这两种算法从数据表和索引中读取数据。这两种算法构成了查询的基础&#xff0c;几乎无处不在。Scan会扫描并且返回整个表或整个索引。 而seek则更有效率&…

HDU 2897 (博弈 找规律) 邂逅明下

根据博弈论的两条规则&#xff1a; 一个状态是必胜状态当且仅当有一个后继是必败状态一个状态是必败状态当且仅当所有后继都是必胜状态然后很容易发现从1开始&#xff0c;前p个状态是必败状态&#xff0c;后面q个状态是必胜状态&#xff0c;然后循环往复。 1 #include <cstd…

C# 设置Excel打印选项及打印excel文档

C# 设置Excel打印选项及打印excel文档 打印Excel文档是一个很常见的操作&#xff0c;但有时候我们会碰到各种不同的打印需求&#xff0c;例如只打印一个Excel工作表的其中一部分&#xff0c;或打印时每页都有表头&#xff0c;或把工作表中超出1页所有内容打印到1页上等等&#…

tp5框架原理详解_笔记:TP5框架完整学习笔记

安装配置官网下载TP5完整版(初学者学习用的)解压到本地的开发环境phpstudy中&#xff0c;默认的入口文件是public&#xff0c;访问public会看到TP5成功页面。目录介绍一般开发中&#xff0c;代码都是写在application这个文件夹中开发一个项目的时候&#xff0c;通常分为前台和后…

mustache 模板使用

//一 ,基本使用 <!DOCTYPE html><html ng-app"myApp"><head lang"en"> <meta charset"UTF-8"> <title></title> <script src"jquery-1.10.2.min.js"></script> <script src"…

Sphinx编译docs文档

在使用Python、Django的过程中&#xff0c;经常看到docs目录&#xff0c;里面存放着一些txt文本文件&#xff0c;也就是自带的一些帮助文档&#xff0c;里面有make.bat&#xff0c;在dos目录下直接执行make&#xff0c;给出的帮助是可以转换成Html、PDF等文件形式&#xff0c;那…

js传参不是数字_js调用函数时传入的参数个数与函数定义时的参数个数不符时的操作...

1.在js中函数没有重载的概念&#xff0c;如果声明了多个重名的函数&#xff0c;不管函数的形参个数是否一样&#xff0c;只有最有一个有效&#xff0c;其他的函数声明都是无效的。比如说声明了两个函数fn()&#xff0c;第一次声明时没有形参&#xff0c;第二次声明时形参有两个…

精妙SQL语句收集(转)

SQL语句先前写的时候&#xff0c;很容易把一些特殊的用法忘记&#xff0c;我特此整理了一下SQL语句操作。 一、基础 1、说明&#xff1a;创建数据库 CREATE DATABASE database-name 2、说明&#xff1a;删除数据库 drop database dbname 3、说明&#xff1a;备份sql serv…

原生JS字符串操作方法汇总

1.转换为字符串类型(三种实现方式) 1 var num110; 2 var mystrnum.toString(); //"110" 3 4 var num111; 5 var mystrString(num); //"111" 6 7 var num112; 8 var mystr"" num; //"112" 2.字符串分割返回新的数…

解决问题:修改tomcat启动后服务器url

解决问题&#xff1a;修改tomcat启动后服务器url 解决方式&#xff1a;通过在pom.xml配置文件中使用configuration标签的子标签path可以修改http://localhost:8080后跟什么路径。如path标签中为/&#xff0c;则tomcat启动后服务器url为http://localhost:8080/

用js来实现那些数据结构 第一章

在开始正式的内容之前&#xff0c;不得不说说js中的数据类型和数据结构&#xff0c;以及一些比较容易让人混淆的概念。那么为什么要从数组说起&#xff1f;数组在js中是最常见的内存数据结构&#xff0c;数组数据结构在js中拥有很多的方法&#xff0c;很多初学者记不清数组的大…

excel密码忘记了怎么办

2019独角兽企业重金招聘Python工程师标准>>> Excel电子表格应用程序堪称Office中的“王牌应用”&#xff0c;能够快速灵活地整理各种大数据&#xff0c;在各行各业中发挥着不可替代的作用。因此&#xff0c;excel文档的跋扈密码比其他文档多&#xff0c;除了常设的打…