一、动态绑定Class
1.1 对象语法
v-bind:class指令是Vue.js中用于动态绑定CSS类的指令。它可以根据Vue实例中的数据来动态添加或移除HTML元素的类。这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。
语法
<div v-bind:class="{ 'class-name': condition }"></div>
class-name: 要绑定的CSS类名condition: 一个表达式，当为true时，class-name会被添加；当为false时，class-name会被移除。
示例
<template>
<div v-bind:class="{ active: isActive, error: hasError }">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
isActive: true, // 根据条件决定是否添加active类
hasError: false, // 根据条件决定是否添加error类
};
},
};
</script>
<style>
.active {
color: blue;
}
.error {
color: red;
}
</style>
在上面的示例中，根据isActive和hasError的值，决定是否添加active和error类。如果isActive为true，则active类会被添加，文本颜色会变为蓝色；如果hasError为true，则error类会被添加，文本颜色会变为红色。
通过v-bind:class指令，可以根据动态数据来灵活控制元素的样式，使页面更具交互性和动态性。
1.2 数组语法
v-bind:class指令还支持数组语法，可以在Vue.js中根据多个条件来动态绑定CSS类。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。
语法
<div v-bind:class="[classA, classB]"></div>
classA,classB: 字符串，表示要绑定的CSS类名。可以是变量、对象属性或直接的类名字符串。
示例
<template>
<div v-bind:class="[activeClass, errorClass]">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false,
};
},
computed: {
activeClass() {
return this.isActive ? 'active' : '';
},
errorClass() {
return this.hasError ? 'error' : '';
},
},
};
</script>
<style>
.active {
color: blue;
}
.error {
color: red;
}
</style>
在上面的示例中，根据isActive和hasError的值，决定是否添加active和error类。通过activeClass和errorClass计算属性，根据条件返回相应的类名，然后通过数组语法将这些类名动态绑定到元素上。
如果isActive为true，则active类会被添加，文本颜色会变为蓝色；如果hasError为true，则error类会被添加，文本颜色会变为红色。
通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
二、动态绑定Style
2.1 对象语法
v-bind:style指令是Vue.js中用于动态绑定元素样式的指令。它可以根据Vue实例中的数据来动态设置HTML元素的内联样式。通过v-bind:style指令，可以实现根据数据的变化动态改变元素的样式，包括颜色、大小、位置等。
语法
<div v-bind:style="styleObject"></div>
styleObject: 一个对象，包含了要应用到元素的CSS样式。
示例
<template>
<div v-bind:style="dynamicStyles">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
dynamicStyles: {
color: 'red', // 设置文本颜色为红色
fontSize: '20px', // 设置字体大小为20px
marginTop: '10px', // 设置上边距为10px
},
};
},
};
</script>
在上面的示例中，dynamicStyles对象包含了要动态应用到元素的样式，包括颜色、字体大小和上边距。当Vue实例中dynamicStyles对象的属性值发生变化时，元素的样式会相应地更新。
通过v-bind:style指令，可以根据动态数据实现元素样式的动态变化，使页面更具交互性和灵活性。需要注意的是，使用v-bind:style指令时，样式值需要以字符串形式传递，例如'20px'、'red'等。
2.2 数组语法
在Vue.js中，v-bind:style指令还支持数组语法，允许我们根据多个条件来动态绑定元素的内联样式。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。
语法
<div v-bind:style="[styleObject1, styleObject2]"></div>
styleObject1,styleObject2: 对象，包含了要动态应用到元素的CSS样式。
示例
<template>
<div v-bind:style="[baseStyles, dynamicStyles]">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
baseStyles: {
color: 'black', // 基础样式，设置文本颜色为黑色
fontSize: '16px', // 基础样式，设置字体大小为16px
},
dynamicStyles: {
color: 'red', // 动态样式，设置文本颜色为红色
fontSize: '20px', // 动态样式，设置字体大小为20px
},
};
},
};
</script>
在上面的示例中，baseStyles对象包含了元素的基础样式，包括文本颜色和字体大小；dynamicStyles对象包含了要根据条件动态改变的样式，如文本颜色和字体大小。通过数组语法将这两个样式对象结合起来，实现了基础样式和动态样式的组合。
当dynamicStyles对象中的属性值发生变化时，元素样式会根据这些动态样式进行更新。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。
通过v-bind:style数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。
