值类型:

1、表达式计算出的字符串结果或者字符串。

2、对象(表达式或者对象名,建议采用对象名)

key为className,值的真假控制这个name的有无。

//class
<div v-bind:class="classObject"></div>
data: {
classObject: {//或者在计算属性里,在切换class里比较常用
active: true,
'text-danger': false
}
} //style
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

3、数组

一般使用对象,数组不好处理计算。

4、指令class与普通class属性共存

<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div> data: {
isActive: true,
hasError: false
}
//渲染结果
<div class="static active"></div>

class和style属性的更多相关文章

  1. dede文章调用时过滤调 body里面的style属性和值

    dede 发布文章的时候会在里面的标签中添加一些style 属性,现在改网站想去掉这些属性和里面的值,因为文章太多所以就用下面的方法 \include\arc.listview.class.php 在 ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. JS中style属性

    解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...

  4. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

  5. 【jQuery】总结:筛选器、控制隐藏、操作元素style属性

    筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...

  6. HTML的style属性

    HTML的style属性 HTML的style属性提供了一种改变HTML样式的通用方法.style是在HTML4版本中引用的,它是一种首选的改变HTML元素样式的方法.可以使用style直接的将样式添 ...

  7. 解决Struts2.2.20版本的标签不支持style属性的问题

    我先把Exception错误信息贴出来:org.apache.jasper.JasperException: /WEB-INF/jsp/topicAction/addUI.jsp (line: 40, ...

  8. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  9. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  10. CSS用HTML中的style属性替换

    废话不多说上代码: 1.用CSS给文字添加背景色: <html> <head> <style type="text/css"> body {ba ...

随机推荐

  1. SQL LAST() 函数

    LAST() 函数 LAST() 函数返回指定的字段中最后一个记录的值. 提示:可使用 ORDER BY 语句对记录进行排序. SQL LAST() 语法 SELECT LAST(column_nam ...

  2. jeecg入门操作—表单界面

    一.搭建jeecg开发环境 参考环境搭建步骤 https://www.cnblogs.com/dyh004/p/10687633.html 二.创建用户数据库表: 登录上jeecg平台,点击在线开发- ...

  3. Net core 关于缓存的实现

    在很多项目中, 需要用到缓存,借鉴网上前辈们的一些经验,自己再进行总结简化了一些, 做出如下的缓存操作,其中包含内存缓存(IMemoryCache) 和 Redis 缓存; 一.前提内容, 导入两个包 ...

  4. Vue 环境搭建(win10)

    1.安装node node官网安装地址 推荐安装稳定版本(LTS)以及安装路径为系统盘(C) 查看node安装成功否 注释:以下命令使用 命令提示符(管理员)权限,win10 对user权限的限制了访 ...

  5. laravel 开启定时任务需要操作

    1.在xshell 中 crontab -e //编辑任务crontab -l //查看执行中的任务列表 2.在打开的任务中: /home/wwwroot/default 换为自己项目的根路径 vag ...

  6. LODOP中tfoot和tbody中间线连不起来

    这种情况发生在使用ADD_PRINT_TABLE时,ADD_PRINT_TABLE是Lodop中专门用来输出table表格的语句,它有很多特点,比如该语句不切行(详细可参考查看本博客相关博文:LODO ...

  7. novaclient的api调用流程与开发

    novaclient的api调用流程与开发 2015年07月05日 19:27:17 qiushanjushi 阅读数:3915   http://blog.csdn.net/tpiperatgod/ ...

  8. Going from u to v or from v to u? POJ - 2762(强连通 有向最长路径)

    In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has n rooms, an ...

  9. 使用Excel VBA编程将网点的百度坐标转换后标注到高德地图上

    公司网点表存储的坐标是百度坐标,现需要将网点位置标注到高德地图上,研究了一下高德地图的云图数据模版 http://lbs.amap.com/yuntu/reference/cloudstorage和坐 ...

  10. 洛谷P1066 2^k进制数(题解)(递推版)

    https://www.luogu.org/problemnew/show/P1066(题目传送) (题解)https://www.luogu.org/problemnew/solution/P106 ...