vue动态修改样式
<template>
<div class="main"
:style="{ height: arpaHeight }"
>
<button class="btn" @click="clickArpaHeader()"></button>
</div>
</template>
<script>
export default {
name: "AisPart",
data() {
return {
showArpa: true,
showOwnState: true,
arpaComponentHeight: 742,
};
},
methods: {
clickArpaHeader() {
this.showArpa = !this.showArpa;
this.arpaComponentHeight = 302;
}
},
computed: {
arpaHeight: function() {
return this.arpaComponentHeight + "px";
},
}
};
</script>
<style>
.main {
width: 322px;
height: 742px;
background: red;
}
.btn{
width:30px;
height:20px
background: green;
}
</style>