Vue中动态添加多个class
vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单
先看一下示例:
代码
<template>
<section class="p-10 cursor-pointer">
<p :class="`${condition1 ? 'font' : ''}${condition1 ? ' size' : ''}`">
HAPPY
</p>
</section>
</template>
<script>
export default {
data() {
return {
condition1: true,
condition2: true
};
},
methods: {
}
};
</script> <style lang="scss">
.font {
color: red;
}
.size {
font-size: 50px;
}
</style>
效果:
原理很简单,就是通过 ${xxx} 取变量的方法来取值,在:class=""里写多个${XX}来取值,取到不同的值,最终就会产生多个class
注意多个className之间要用空格隔开
Vue中动态添加多个class的更多相关文章
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- vue向数组中动态添加数据
vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- Android 在程序中动态添加 View 布局或控件
有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
随机推荐
- MyEclipse中背景颜色的设定
设置代码编写区域背景色的方法: Window-->Preferences-->General-->Editors-->TextEditors-->在Appearance ...
- node-nginx二级域名添加配置
首先在阿里云配置解析域名 指向端口为3200的nodejs服务,在nginx/conf.d下增加文件chat.conf,内容如下: server { listen 80; server_name ww ...
- JS的面向对象编程
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...
- 基于Html5+HLS协议播放符合部标1078协议的实时流媒体视频
由于现在主流的部标GPS和1077视频监控平台,都是BS架构,在网页上播放视频,早期的很多平台用的都是ActiveX控件的形式,依赖于IE浏览器,需要降低浏览器的安全设置,而且非常难用.同时由于win ...
- spring mvc中拦截器配置mvc:interceptors
其实在mvc:interceptors标签中,有两种类型的配置,一种直接配置一个bean(bean和ref归为一类),另一种还要配置上拦截的路径和排除的路径.直接配置的bean那就代表对所有的请求进行 ...
- XSS绕过与防御总结
跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web页面里插 ...
- zookeeper安装与集群搭建
此处以centos系统下zookeeper安装为例,详细步骤可参考官网文档:zookeeper教程 一.单节点部署 1.下载zookeeper wget http://mirrors.hust.edu ...
- 编写可维护的JavaScript----笔记(二)
01.何时使用注释 添加注释的一般原则是,在需要让代码变得更清晰时添加注释 难于理解的代码 浏览器特性hack 注释声明: TODO 说明代码还没完成,应当包含下一步要做的事情 XXX 说明代码是有问 ...
- php 计算时间添加
$Date_1=date("Y-m-d");$Date_2="2015-10-11";$d1=strtotime($Date_1);$d2=strtotime( ...
- 使用html替代excel导出数据的优势和技巧
之前一直使用NPOI或者微软office官方组件导出excel,但是多多少少会有写小问题,不是数据量不能过大(xls的问题,用xlsx就可以更大了),就是速度慢,或者文件体积太大 中途采用过csv(逗 ...