Vue 样式绑定的几种方式

样式动态绑定

• Vue.js v-bind 在处理 class 和 style 时, 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组

script 部分如下

 data: {
      isActive: true,
      isActive_1: false,
      hasError: true,
      isCenter: true,
      error: null,
      activeClass: 'active',
      centerClass: 'center',
      class_exp: {
       'active': true,
       'center': false,
       'orange': true
       }
      },
computed: {
      computed_obj: function() {
            return {
                  orange: this.isActive && !this.error,
                  center: this.isCenter,
                  'text-danger': this.error && this.error.type === 'fatal',
                  }
       }
}

.active {
    width: 300px;
    height: 100px;
    background: green;
}

.text-danger {
    background: red;
}

.center {
    text-align: center;
}

.orange{
    background: orange;
}

<!-- 1: 动态添加class -->
<div :class="{active: isActive, center:isCenter}">:class="{active: isActive,center:isCenter}}"</div>
<!-- 如果 isActive 和 isCenter 为 true -->
<div class="active center">class="active center"</div>

<!-- 2: 直接绑定数据里的一个对象 -->
<!-- 对象就是一个样式的表达式: class="{class1: true, class2: true, class3: false}"-->

 <div :class="class_exp">
      class_exp: {
            'active': true,
            'center': false,
            'orange': true
      }
</div>

<!-- 3: 在这里绑定返回对象的计算属性.这是一个常用且强大的模式-->
<!-- 对象就是一个样式的表达式: class="{class1: true, class2: true, class3: false}"-->

 <div :class="computed_obj">
      computed:{
            computed_obj: function(){
                  return {
                        orange: this.isActive && !this.error,
                        center: this.isCenter,
                        'text-danger': this.error && this.error.type === 'fatal',
                    }
            }
      }
</div>

<!-- 4: 把一个数组传给 :class-->
 <!-- 每一个数组元素指向一个 css class -->

<div :class="[activeClass,centerClass]">Use array</div>

<!-- 5: 使用三元表达式来切换列表中的 class-->
<!-- centerClass 始终存在. activeClass根据条件 -->

div :class="[centerClass, isActive_1? activeClass:'']"></div>