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

一 原生用法

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. 华企盾DSC启动服务器提示“发生系统错误5”

    解决方法:没有管理员权限 导致,需要以管理员权限运行服务器安装包,覆盖安装一下

  2. 痞子衡嵌入式:简析i.MXRT1170 MECC64功能特点及其保护片内OCRAM1,2之道

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1170 MECC64功能特点及其保护片内OCRAM1,2之道. ECC是 "Error Correcting C ...

  3. PersistenceException 持久性异常

    首先查看他提供的错误信息 检查pom.xml文件,查看是否有: 确保文件夹是这种xml格式的 操作maven  >>>>clean 和compile       进行清理和重新 ...

  4. 码农的转型之路-PLC异地组网与远程控制

    PLC异地组网与远程控制,需求是基于园子认识的朋友提供,大体是实现PLC多个局域网异地组网,并实现远程控制.大屏展示.手机端控制.预警推送等功能.其他就是可以方便二次开发界面,以满足不同客户的需求. ...

  5. JQuery&Ajax基础知识

    JQuery&Ajax基础知识 1.Jquery简介 Query是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年 ...

  6. 关于three.js中的矩阵更新

    目录 1. 概述 2. 详解 1. 概述 使用如下代码绘制一个面: 'use strict'; function init() { //console.log("Using Three.js ...

  7. 详解驱动开发中内核PE结构VA与FOA转换

    摘要:本文将探索内核中解析PE文件的相关内容. 本文分享自华为云社区<驱动开发:内核PE结构VA与FOA转换>,作者: LyShark . 本章将探索内核中解析PE文件的相关内容,PE文件 ...

  8. 华为云数据库内核专家为您揭秘:GaussDB(for MySQL)并行查询有多快?

    摘要:GaussDB(for MySQL)并行查询为何快人一步?华为云数据库内核专家这样说 本文分享自华为云社区<华为云数据库内核专家为您揭秘:GaussDB(for MySQL)并行查询有多快 ...

  9. 详解4种微服务框架接入Istio方案

    摘要:使用k8s和lstio网格进行开发,将服务发现.服务治理留给基础设施,可以将开发人员从复杂的服务中解脱出来,专注于业务开发,是当前来说比较好的解决方案. 本文分享自华为云社区<传统微服务框 ...

  10. 带你掌握不同平台下,探索JDK源码所需的native方法

    摘要:要探索JDK的核心底层源码,那必须掌握native用法.文章中会以"获取系统的默认时区"为例,介绍说明如何查看native对应方法的源码. 本文分享自华为云社区<要探索 ...