Vue对class绑定的方式以及选择器.class1.class2和.class1 .class2的区别

news/2024/7/10 2:52:07 标签: vue, css

Vue对class绑定的方式以及选择器

<div :class="{active:isPlaying}"></div>
<div :class="{active:isPlaying,demo:isPlaying}"></div>

active是否作用于该div元素上 由isPlaying数据来决定,为true时作用,false时不作用。

.class1.class2和.class1 .class2的区别

.class1.class2(中间没有空格)匹配的是同时拥有class1和class2的元素

<div class="class1 class2">...</div>`

.class1 .class2匹配的是父节点有.class1,子节点有.class2的元素

<div class="class1">
<div class="class2">
...
</div>
</div>

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

相关文章

Leetcode 1255:得分最高的单词集合(超详细的解法!!!)

你将会得到一份单词表 words&#xff0c;一个字母表 letters &#xff08;可能会有重复字母&#xff09;&#xff0c;以及每个字母对应的得分情况表 score。 请你帮忙计算玩家在单词拼写游戏中所能获得的「最高得分」&#xff1a;能够由 letters 里的字母拼写出的 任意 属于 w…

linux系统vim命令下出现press enter or type command to continue解决方法

linux系统vim命令下出现press enter or type command to continue解决方法

Leetcode 828:独特字符串(超详细的解法!!!)

如果一个字符在字符串 S 中有且仅有出现一次&#xff0c;那么我们称其为独特字符。 例如&#xff0c;在字符串 S "LETTER" 中&#xff0c;"L" 和 "R" 可以被称为独特字符。 我们再定义 UNIQ(S) 作为字符串 S 中独特字符的个数。 那么&#x…

阿里云服务器:ECS云服务器新手上路

一、ECS远程登录实践&#xff08;windows 登录 linux&#xff09; 1.点击安装的 putty 进入后 输入用户名 下载并安装putty&#xff0c;下载地址如下&#xff1a; 64-bit&#xff1a; https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe 32-bit&#xff1a; https://…

Leetcode 1256:加密数字(超详细的解法!!!)

给你一个非负整数 num &#xff0c;返回它的「加密字符串」。 加密的过程是把一个整数用某个未知函数进行转化&#xff0c;你需要从下表推测出该转化函数&#xff1a; 示例 1&#xff1a; 输入&#xff1a;num 23 输出&#xff1a;"1000"示例 2&#xff1a; 输入…

Leetcode 1257:最小公共区域(超详细的解法!!!)

给你一些区域列表 regions &#xff0c;每个列表的第一个区域都包含这个列表内所有其他区域。 很自然地&#xff0c;如果区域 X 包含区域 Y &#xff0c;那么区域 X 比区域 Y 大。 给定两个区域 region1 和 region2 &#xff0c;找到同时包含这两个区域的 最小 区域。 如果区…

Leetcode 1258:近义词句子(超详细的解法!!!)

给你一个近义词表 synonyms 和一个句子 text &#xff0c; synonyms 表中是一些近义词对 &#xff0c;你可以将句子 text 中每个单词用它的近义词来替换。 请你找出所有用近义词替换后的句子&#xff0c;按 字典序排序 后返回。 示例 1&#xff1a; 输入&#xff1a; synony…

vue学习笔记——node-sass安装的各种坑

一、在执行npm run dev时遇到“Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)”错误。 按提示信息应该是Node-sass版本在当前环境运行不了&#xff0c;查阅后采用网上的解决方法&#xff0c;把Node-sass删除…