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

一 原生用法

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. TypeError: 'module' object is not callable (pytorch在进行MNIST数据集预览时出现的错误)

    在使用pytorch在对MNIST数据集进行预览时,出现了TypeError: 'module' object is not callable的错误: 上报错信息图如下: 从图中可以看出,报错位置为第 ...

  2. Java中的并发队列

    1.队列 队列是一种数据结构.它有两个基本操作:在队列尾部加入一个元素,和从队列头部移除一个元素(注意不要弄混队列的头部和尾部)就是说,队列以一种先进先出的方式管理数据,如果你试图向一个 已经满了的阻 ...

  3. PTA 函数与递归部分题目讲解及思路

    7-1 判断素数 题目分析 题目输入n个数,判断其是否为质数 对于判断质数,只需要满足从2开始遍历的每一个数一直到√n均无法被n整除即可 关于为什么只要到√n呢? 因为n = √n * √n,因此其最 ...

  4. 华企盾DSC启动服务器提示“发生系统错误5”

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

  5. postman——token传参

    问题描述: 有一个登陆接口获取token,其他接口再次访问都要带上token 解决方案: 1.在登陆接口访问后设置Postman的环境变量(Environment),例如设置环境变量名:token,值 ...

  6. 2023河南省第五届“金盾信安杯”CRYPTO MISC 复现

    MISC 来都来了 题目 我的解答: 给了一个加密压缩包,010查看发现是伪加密,修改如下两部分: 头部和尾部的09分别改为00 然后解压得到: 尝试base64解码得到很零散的结果..大眼一看不知道 ...

  7. K8s和声明式编程

    转载:原文链接 认识k8s之后,他的操作模式对我来说是一种很不错的体验.他提供了更接近现实世界的面向对象接口. 什么是k8s? Kubernetes(K8s)是一种开源容器编排平台,用于自动化部署.扩 ...

  8. C#/.NET/.NET Core面试宝典(基础版)

    前言 该知识库主要由自己平时学习实践总结.网上优秀文章资料收集(这一部分会标注来源)和社区小伙伴提供三部分组成.欢迎关注我的微信公众号(声明公众号不推广告,纯属个人技术文章分享)回复关键字获取宝库地址 ...

  9. 24、去除右上方的debug图标

    class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext ...

  10. .NET技术分享日活动-202107

    2021年7月3日下午,个人组织举办了山东地区的第二次山东.NET技术分享日活动.围绕互联网技术.大数据.机器学习.业务实践等方向进行创新技术的实践分享. 本次技术分享日活动面向了山东地区广大的.NE ...