• 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'
    }
    }

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    ubuntu安装php的 mongodb扩展
    ubuntu安装php的 redis扩展
    Ubuntu14.04下安装Composer
    编译安装php
    RabbitMQ PHP扩展安装
    编译安装opssl
    安装卸载nginx
    本地VM安装虚拟机,使用xshell连接
    下载并破解IntelliJ IDEA(2017)
    symfony框架中使用service
  • 原文地址:https://www.cnblogs.com/yu-tang/p/12895633.html
Copyright © 2020-2023  润新知