vue点击按钮,来改变style的格式
时间: 2023-10-22 11:13:57 浏览: 42
点击改变样式
4星 · 用户满意度95%
可以使用v-bind:style来绑定一个对象,然后在按钮的@click事件中修改对象中的属性值,从而改变style的格式,例如:
```
<template>
<div :style="myStyle">
<button @click="changeStyle">点击按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
myStyle: {
backgroundColor: 'white',
color: 'black',
fontSize: '16px'
}
}
},
methods: {
changeStyle() {
this.myStyle.backgroundColor = 'red';
this.myStyle.color = 'white';
this.myStyle.fontSize = '20px';
}
}
}
</script>
```
阅读全文