vue中class和style动态绑定

class和style动态绑定

class绑定

class绑定一个对象，

对象中的属性为class名，值为true或false，如果为true，则添加该class，为false，则不添加该class。

<div :class="{active:isActive}">111</div>
<script>
    export default {
        data(){
            return {
                isActive:true
            }
        }
    }
</script>

可以绑定为一个数组

数组中的元素为class名，如果为true，则添加该class，为false，则不添加该class。

<div :class="[activeClass, errorClass]"></div>
data() {  
  return {  
    activeClass: 'active',  
    errorClass: 'text-danger'  
  }  
}

可以绑定为字符串，

<div :class="'active'">111</div>
<script>
    export default {
        data(){
            return {
                active: "active"
            }
        }
    }

绑定为数组和对象结合

<div :class="[{ active: isActive }, errorClass, { 'text-large': isLarge }]"></div>

style绑定

style 绑定通常使用 v-bind:style 或简写为 :style。它接受一个对象，用于动态地设置元素的样式。对象的每个键是一个 CSS 属性名（可以使用驼峰式或短横线分隔），每个值是一个对应的值。

参数为对象

<template>  
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello, Vue!</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      activeColor: 'red',  
      fontSize: 30  
    };  
  }  
}  
</script>

参数为数组

数组语法可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

• 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。