首页 » 文章 » 文档 » vuejs 使用问题 » Vue 的 class 和 style

Vue 的 class 和 style

  • 使用动态属性
  • 使用驼峰式写法
<template>
<div>
<p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
<p :class="[black, yellow]">使用 class (数组)</p>
<p :style="styleData">使用 style</p>
</div>
</template>

<script>
export default {
data() {
return {
isBlack: true,
isYellow: true,

black: 'black',
yellow: 'yellow',

styleData: {
fontSize: '40px', // 转换为驼峰式
color: 'red',
backgroundColor: '#ccc' // 转换为驼峰式
}
}
}
}
</script>

<style scoped>
.black {
background-color: #999;
}
.yellow {
color: yellow;
}
</style>

»vuejs 使用问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top