zoukankan      html  css  js  c++  java
  • vue绑定样式,class和style

    vue动态修改样式的方式

    注意:固定样式单独写在一个class中,选择的class写在一起,选出的class会和固定class合并共存
    例如:
    <div class="static" v-bind:class="{ 'text-danger':hasError }"></div>
    会渲染为:
    <div class="static text-danger"></div>
    一,多个样式共同生效
    1,class绑定对象
    直接写进class
    <div class="static" v-bind:class="{ 'text-danger':true,'word-danger':false }"></div>
    对象写在data
    <div class="static" v-bind:class="obj"></div>
    data:{
    obj:{ 'text-danger':true,'word-danger':false }
    }
    2,class绑定数组
    <div v-bind:class="['active', 'text-danger']"></div>
    两个样式仍旧可以共存
    注意:数组项可以使用三元表达式选择class,也可以使用对象作为数组项

    二,绑定内联样式style
    <div v-bind:style="[baseStyles, styleObject]"></div>

    data: {
    styleObject: {
    color: 'red',
    fontSize: '13px'
    },
    baseStyles:{
    color: 'red',
    fontSize: '13px'
    }
    }

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    Vim的分屏功能
    vim简明教程
    trk压力测试工具(测试tcp)
    浅谈ThreadPool 线程池
    压力测试的概念
    wrk 网站压力测试
    windows下vim中文乱码处理
    java 新创建的类要重写的方法
    多线程代码示例
    System.out.print实现原理猜解
  • 原文地址:https://www.cnblogs.com/yu-tang/p/12895633.html
Copyright © 2011-2022 走看看