Class 绑定：
1. 对象语法：
使用对象语法，根据条件动态地添加或移除类名：
<template>
<div v-bind:class="{ active: isActive, 'text-danger': hasError }">Dynamic Classes</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
};
}
};
</script>
2. 数组语法：
使用数组语法，根据条件动态地添加或移除多个类名：
<template>
<div v-bind:class="[activeClass, errorClass]">Dynamic Classes</div>
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
};
}
};
</script>
3. 对象和数组混合使用：
可以将对象和数组语法混合使用，更灵活地控制类名的动态变化：
<template>
<div v-bind:class="[baseClass, { active: isActive, 'text-danger': hasError }]">Dynamic Classes</div>
</template>
<script>
export default {
data() {
return {
baseClass: 'base',
isActive: true,
hasError: false
};
}
};
</script>
Style 绑定：
1. 对象语法：
使用对象语法，动态地绑定内联样式：
<template>
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">Dynamic Styles</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16
};
}
};
</script>
2. 数组语法：
使用数组语法，可以应用多个样式对象：
<template>
<div v-bind:style="[baseStyles, dynamicStyles]">Dynamic Styles</div>
</template>
<script>
export default {
data() {
return {
baseStyles: {
color: 'blue',
fontSize: '14px'
},
dynamicStyles: {
fontWeight: 'bold'
}
};
}
};
</script>
以上是在 Vue 3.0 中绑定类和样式的一些基本用法。这些方法允许你根据组件的状态动态地应用类和样式，使得视图更加灵活和响应式。
转载请注明出处：http://www.zyzy.cn/article/detail/485/Vue 3.0