zoukankan      html  css  js  c++  java
  • vue class绑定与style绑定

    对象语法:
    对象中有一个属性:
    我们可以传给 v-bind:class 一个对象,以动态地切换 class 。

    <div v-bind:class="{ active: isActive }"></div>
    

    上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
    对象中有多个属性
    我们也可以在对象中传入更多属性用来动态切换多个 class 。此外, v-bind:class 指令可以与普通的 class 属性共存。如下模板:

    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
    

    如下 data:

    data: {
      isActive: true,
      hasError: false
    }
    

    渲染为:

    <div class="static active"></div>
    

    直接绑定数据里一个对象
    你也可以直接绑定数据里的一个对象:

    data: {
    classObject: {
    active: true,
    ‘text-danger’: false
    }
    }
    绑定队像的计算属性:
    渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:

    <div v-bind:class="classObject"></div>
    
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal',
        }
      }
    }
    
  • 相关阅读:
    There was an internal API error
    MD5加密
    CentOS 7 最小化安装简单配置
    Dalvik 虚拟机操作码
    BugkuCTF~Web~WriteUp
    BugkuCTF~代码审计~WriteUp
    Android 个人手机通讯录开发
    Android SQLite 数据库学习
    Android 程序结构
    2018~第三届南宁市网络安全技术大赛~nnctf~write-up
  • 原文地址:https://www.cnblogs.com/princeness/p/11664950.html
Copyright © 2011-2022 走看看