样式与数据绑定
<template>
<div>
<!--直接添加样式-->
<div class="active"></div>
<!--样式与数据绑定-->
<div :class="{active: isActive}"></div>
<br>
<div :class="[activeClass, errorClass]">文字</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
}
}
</script>
<!--样式-->
<style scoped>
.active {
width: 100px;
height: 100px;
background: red;
}
.text-danger {
background: yellow;
text-align: center;
}
</style>
scoped：当前样式
<style scoped>
</style>
