vue点击按钮改变按钮样式

最新推荐文章于 2024-06-01 13:49:38 发布

圣主大哥

最新推荐文章于 2024-06-01 13:49:38 发布

阅读量4k

点赞数 2

分类专栏：技术

本文链接：https://blog.csdn.net/weixin_45587783/article/details/128101258

版权

Vue.js 按钮样式事件处理数据绑定 CSS样式

关键词由CSDN通过智能技术生成

技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一. 效果

点击按钮前：

点击按钮后：

再次点击按钮变回原来的样式：

二. 具体代码

<template>
    <div id="box">
        <button @click="btn" id="but" v-bind:class="{ but01: style1, but02: style2 }">按钮</button>
    </div>
</template>
<style scoped>
#but {
    width: 100px;
    height: 50px;
    color: #fff;
}

.but01 {
    background-color: black;
}

.but02 {
    background-color: blue;
}
</style>
<script>
export default {
    data() {
        return {
            style1: true,
            style2: false
        }
    },
    methods: {
        btn() {
            this.style1 = !this.style1
            this.style2 = !this.style2  
        }
    }
}   
</script>