本文为博主原创,未经允许不得转载:

一 原生用法

style="width: 100%; margin-top: 20px" disabled

二  三元表达式

<a :style="{color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>

或者:

<Button  type="text" size="small" @click="showEdit(row)" :style="row.status==0?'color:#2d8cf0':''" :disabled="row.status==1">修改</Button>

三 函数用法

 <div :style="{ height: tableRowHeight(item) }" class="tableRowCox">
{{ item.id ? item.id : "--" }}
</div>

四 变量用法

<div :style="{ height:conFontHeight}"> {{ item.id ? item.id : "--" }} </div>

vue 中对style、disable 等样式进行条件判断的更多相关文章

  1. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  2. vue中修改第三方组件的样式不生效

    问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</e ...

  3. VUE中的style 样式处理的Scope (<style scope>)

    在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...

  4. vue 中使用style(样式)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【转】vue中样式被覆盖的问题,vue中的style不生效

    转载:http://www.cnblogs.com/shangjun6/p/11416054.html 在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们 ...

  6. vue中修改第三方组件的样式并不造成污染

    vue引用了第三方组件, 需要在组件中局部修改第三方组件的样式, 而又不想去除scoped属性造成组件之间的样式污染. 此时只能通过>>>,穿透scoped. 但是,在sass中存在 ...

  7. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  8. vue单文件 style important引入样式

    使用@import引入外部css,作用域是全局的 <template> </template> <script> export default { name: &q ...

  9. vue中设置全局的css样式

    只需在main.js    ====import './style.less'   main.js =>>   import Vue from 'vue' import App from ...

  10. vue中通过js控制页面样式方法

    在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

随机推荐

  1. JXNU acm选拔赛 壮壮的数组

    壮壮的数组 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submiss ...

  2. ElasticSearch-document文档数据-增删改

    文档就是相当于每条记录. 每个文档(数据记录行)都有几个元数据,分别是: _index,表示该文档是那个索引中的. _type,表示文档的类型 _id,文档的唯一ID编号 _score,相关性分数. ...

  3. 基于QT环境下,实现客户端红外采集人体向服务端通信。

    一.本次测试目的 基于QT环境下STM32人体红外检测,实现客户端红外采集到信息向服务端通信. 二.功能 (1).传入音乐,当服务端接收到信息时,打开音乐    (2).在服务端上面显示图片,当接收到 ...

  4. xml的语法总结

    xml的语法总结

  5. 零基础电气专业毕业生,花费9.9元自学前端,成都月薪6.5K

    介绍 毕业于成都理工电气专业,大学毕业后进入了一家电气公司,月薪2000元.一直对互联网行业感兴趣,但由于没有相关专业背景,所以一直没有勇气转行. 转行契机 公司的书记想搞一个内部生产管理系统,看我们 ...

  6. C语言之小明的加减法

    1.题目内容: 叛逆期的小明什么都喜欢反着做,连看数字也是如此(负号除外),比如: 小明会把1234它看成4321:把-1234看成-4321:把230看成032 (032=32):把-230看成-0 ...

  7. 七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入(1)

    前言 由于第七天Blazor前端页面编写和接口对接的内容比较的多,所以这一章节将会分为三篇文章来进行讲解,大家可以认为分为早.中.晚来进行阶段性学习,从而提高学习效率. 七天.NET 8 操作 SQL ...

  8. node版本管理工具推荐

    hello,今天给大家分享几款 node 版本管理的工具. 背景 在开发前端项目的时候,特别是新到公司接手一个多年维护的老项目时,如果 node 版本不正确,有的插件可能无法正确安装,比如我之前提到的 ...

  9. 【福利活动】华为云“上云之路”征文大赛开启,FreeBuds3无线耳机等重磅好礼送不停

    各位关注华为云的开发者们,达嘎猴啊~ 今天带给你们一个好消息,大家心心念念的华为云"上云之路"征文大赛已经正式开启啦. 举办本次华为云"上云之路"征文大赛的目的 ...

  10. 理解三值逻辑与NULL,你离SQL高手更近了一步

    什么是NULL NULL 用于表示缺失的值或遗漏的未知数据,不是某种具体类型的值.数据表中的 NULL 值表示该值所处的字段为空,值为 NULL 的字段没有值,尤其要明白的是:NULL 值与 0 或者 ...