vue学习笔记 样式 class style（五）

使用v-bind数据绑定class和style，v-bind:class可以与传统的class属性共存，其中可以用{}设置多个class，根据条件判断的语法是class名:条件，带-的class名需要额外加引号，如果想输出变量的值，用[]把变量括起来，变量也可以使用计算属性。

<div id="example">
    <div class="static" v-bind:class="{ active: isActive, deactive: isDeactive, 'text-danger': hasError }"></div>
    <div class="static" v-bind:class="[activeClass, errorClass]"></div>
    <div class="static" v-bind:class="[{'text-danger': isDeactive}, errorClass]"></div>
    <div class="static" v-bind:class="[{[errorClass]: isDeactive}, errorClass]"></div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            isActive: false,
            hasError: true,
            activeClass: 'active',
            errorClass: 'text-danger',
        },
        computed: {
            isDeactive: function () {
                return !this.isActive;
            }
        }
    });
</script>

 

内联样式使用v-bind:style语法，可以直接取data里的值

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

也可以使用变量获取

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

 

也可以将多个样式对象使用在同一个元素上

<div id="example">
    <div class="static" v-bind:style="[style1, style2]"></div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            style1: {
                fontSize: '12px',
                color: 'red'
            },
            style2: {
                'line-height': '30px',
                color: 'blue'
            }
        },
        computed: {
            isDeactive: function () {
                return !this.isActive;
            }
        }
    });
</script>