<p :style="{width:'4px',height: '24px',background: '#f7ce51'}"></p>
<p:style="{height: '400px','overflow-y': 'auto','background-color': '#f3f3f3',padding: '15px'}"></p>
 
1、三元运算符判断
<div :style="{ 'opacity': !editableCheckNum ? 0.5 : 1 }">555</div>
 
2、动态设置class
<div :class="activeMachineId === machineItem.machineId?'activeStyle':'machineBar'" v-for="(machineItem,machineIndex) in machineList" @click="clickMachineEvent">    
    <p>{{machineItem.name}}</p>    
    <p :style="machineStatusStyle(machineItem.status)"></p>
</div>
 
3、方法判断
    <div class="machineBigBar machineList">    
        <div class="machineBar" v-for="(machineItem,machineIndex) in processItem.machineList" :key="machineIndex">        
            <p>{{machineItem.name}}</p>        
            <p :style="machineStatusStyle(machineItem.status)"></p>    
        </div>
    </div>  
    methods:{    
        machineStatusStyle(e){        
            console.log('值',e)        
            if(e === 1){            
                return {                
                    width:'14px',height:'16px',                
                    background:"url('/src/images/time.png') no-repeat center",                 
                    marginLeft: '10px'            
                }        
            }else if(e === 2){            
                return {                
                    width:'14px',
                    height:'16px',                
                    background:"url('/src/images/time.png') no-repeat center",                 
                    marginLeft: '10px'            
                }        
            }else if(e === 3){            
                return {                
                    width:'14px',
                    height:'16px',                
                    background:"url('/src/images/time.png') no-repeat center",                 
                    marginLeft: '10px'            
                }        
            };    
        }
4、数组绑定
    <div :class="[activeStyle, defaultStyle]"></div>
 
5、computed结合es6对象的计算属性名方法

<div :class="dynClass">测试</div>

 
<script>     
    let activeStr = 'activeStyle';     
    let isAActive = true;     
    let isBActive = false;     
    export default { 
        computed: { 
            dynClass () { 
                return [ 
                    `${activeStr}`, 
                    {                         
                        ['name']: isAActive,    // 属性是条件,条件成立,则创建该属性
                        ['age']: isBActive                     
                    }                 
                ]             
            }         
        },
    }
</script>
解析: <div class="activeStyle name">测试</div>

vue 动态样式的更多相关文章

  1. vue动态样式设置

    思路: 通过 v-bind:class="true ? style1 : style2 " 配合三元表达式完成样式的切换 具体实现 //return设置控制的参数 //有多个需要样 ...

  2. vue中动态样式不起作用? scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  3. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  4. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  5. vue.js样式绑定

    vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...

  6. 10.Vue.js 样式绑定

    Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...

  7. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

  8. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  9. Less (一种动态样式语言)

    Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...

随机推荐

  1. 【Linux基础】常用Linux命令: cd, cp, ls, mkdir, mv, rm, su, uname

    常用Linux命令:cd, cp, ls, mkdir, mv, rm, su, uname cd命令:切换当前工作目录至 dirName(目录参数) 其中 dirName 可为绝对路径或相对路径.若 ...

  2. windows安装IDEA

    1.安装下载 https://www.jetbrains.com/idea/download/#section=windows 2.服务器激活地址: 39.129.9.34:8888 https:// ...

  3. springboot~Mongodb的集成与使用

    说说springboot与大叔lind.ddd的渊源 Mongodb在Lind.DDD中被二次封装过(大叔的.net和.net core),将它当成是一种仓储来使用,对于开发人员来说只公开curd几个 ...

  4. java多线程Lock接口简介使用与synchronized对比 多线程下篇(三)

    前面的介绍中,对于显式锁的概念进行了简单介绍 显式锁的概念,是基于JDK层面的实现,是接口,通过这个接口可以实现同步访问 而不同于synchronized关键字,他是Java的内置特性,是基于JVM的 ...

  5. java锁与监视器概念 为什么wait、notify、notifyAll定义在Object中 多线程中篇(九)

    在Java中,与线程通信相关的几个方法,是定义在Object中的,大家都知道Object是Java中所有类的超类 在Java中,所有的类都是Object,借助于一个统一的形式Object,显然在有些处 ...

  6. SLAM+语音机器人DIY系列:(四)差分底盘设计——3.底盘通信协议

    摘要 运动底盘是移动机器人的重要组成部分,不像激光雷达.IMU.麦克风.音响.摄像头这些通用部件可以直接买到,很难买到通用的底盘.一方面是因为底盘的尺寸结构和参数是要与具体机器人匹配的:另一方面是因为 ...

  7. SLAM+语音机器人DIY系列:(四)差分底盘设计——4.底盘ROS驱动开发

    摘要 运动底盘是移动机器人的重要组成部分,不像激光雷达.IMU.麦克风.音响.摄像头这些通用部件可以直接买到,很难买到通用的底盘.一方面是因为底盘的尺寸结构和参数是要与具体机器人匹配的:另一方面是因为 ...

  8. SpringCloud学习中遇到的一些bug

    There was a problem with the instance info replicator 错误原因: 该服务尝试将自己作为客服端注册 解决办法: 在application.yml配置 ...

  9. DSAPI官方QQ群

    DSAPI官方QQ群  请加主群,若主群成员已满,请加分群. 群内除常规的.NET技术交流外,也负责DSAPI的使用技术支持和更新通知.   『VB.NET/C#编程』主群              ...

  10. C#通过序列化实现深表复制

    利用二进制序列化的方式进行深拷贝  有一个缺陷 序列化的类型必须标识为刻序列化的[Serializable] 否则无法进行二进制序列化 class Program { static void Main ...