computed 計算屬性改變背景色
阿新 • • 發佈:2018-12-14
html:
<template>
<div>
<button @click="changeColor =! changeColor">change Color</button>
<div :class="compClasses">
<span>改變背景色</span>
</div>
</div>
</template>
javascript:
<script> export default { data(){ return{ changeColor:false, } }, computed:{ compClasses(){ return { changeColor:this.changeColor } } } } </script>
css:
<style>
span{
color: red;
}
.changeColor span{
background-color: yellowgreen;
}
</style>
效果: