【Vue】动态设置元素类以及样式

Vue2 动态设置元素类以及样式

1.动态设置类 class

1.1 字符串语法

通过v-bind绑定元素的class属性，为其指定一个字符串：

<div v-bind:class="className">class动态绑定</div>
<script>
export default {data() {return {className: 'app'}}
}
</script>

此时我们可以通过改变className变量来切换样式。注意，当className为 '' 时，这个class属性仍然会被添加到真实DOM上，只不过没有值。

1.2 对象语法

通过v-bind绑定元素的class属性，为其指定一个对象：

<div v-bind:class="{active: isActive}">class动态绑定</div>
<script>
export default {data() {return {isActive: true}}
}
</script>

在上面的例子中，这个元素身上的class属性是否包含active，取决于数据isActive的值。当isActive为true时，渲染结果如下：

<div class="active">class动态绑定</div>

而当我们动态修改isActive的值时，该元素的class属性也会动态更新，将值改为false：

<div class>class动态绑定</div>

进一步地，对象中可以传入多个className：

<div v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {data() {return {isActive: true,isDanger: true}}
}
</script>

此时的渲染结果为：

<div class="active danger">class动态绑定</div>

当然，v-bind绑定的class属性也可以与普通的class并存：

<div class="common" v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {data() {return {isActive: true,isDanger: true}}
}
</script>

此时渲染结果为：

<div class="common active danger">class动态绑定</div>

另外，当需要动态绑定的className太多时，不需要内联定义在模板中，此时可以选择在data中定义一个对象，或使用计算属性：

<div class="common" v-bind:class="classObj1">class动态绑定 --- data中定义对象</div>
<div class="common" v-bind:class="classObj2">class动态绑定 --- 计算属性</div>
<script>
export default {data() {return {isActive: true,isDanger: true,classObj1: {active: true,danger: true}  }},computed: {classObj2() {return {active: this.isActive,danger: this.isDanger}}}
}
</script>

1.3 数组语法

通过v-bind绑定元素的class属性，为其指定一个数组：

<div v-bind:class="[className, 'common']"></div>
<script>
export default {data() {return {className: 'app'}}
}
</script>

此时的渲染结果：

<div class="common app"></div>

使用数组，里边的值可以是响应式的也可以是普通类名，同时也可以使用三元表达式，甚至可以结合上面的对象语法使用：

<div v-bind:class="[className, 'common', isActive ? 'active': '', { danger: isDanger }]"></div>
<script>
export default {data() {return {className: 'app',isAcive: true,isDanger: true,}}
}
</script>

2.动态绑定样式 Style

2.1 字符串语法

通过v-bind绑定元素的style属性，为其指定一个字符串：

<div v-bind:style="style">style动态添加</div>
<script>
export default {data() {return {style: 'color: red'}}
}
</script>

2.3 对象语法

通过v-bind绑定元素的style属性，为其指定一个对象，对象语法十分直观 —— 看着非常像 CSS，但其实是一个js对象。CSS 名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名。：

<div v-bind:style="{ color: color, fontSize: fontSize + 'px', (padding-left): paddingLeft }"></div>
<script>
export default {data() {return {style: 'red',fontSize: 30,paddingLeft: '10px'}}
}
</script>

既然可以使用对象语法，那么同样的，style也可以在data中定义一个对象或者使用计算属性。

2.3 数组语法

通过v-bind绑定元素的style属性，为其指定一个数组，数组中可以为多个样式对象：

<div v-bind:style="[styleObj, overridingStyles]"></div>
<script>
export default {data() {return {color: 'red',fontSize: '30px',overridingStyles: {color: 'blue',fontSize: '40px'}}},computed: {styleObj() {return {color: this.color,fontSize: this.fontSize}}}
}
</script>