vue实现点击按钮切换背景颜色的示例代码_vue设置按钮颜色,vue按钮颜色 - CSDN文库

179 浏览量更新于2023-03-16 评论 1 收藏 45KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue实现点击按钮切换背景颜色的示例代码实现点击按钮切换背景颜色的示例代码

主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习

或工作具有一定的参考借鉴价值,需要的朋友可以参考下

用vue简单的实现点击按钮切换背景颜色，具体代码如下所示：

<div class="btnTitle">

<div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div>

<div class="btn-bg" :class="{bg:time == 4}" @click="changeBg(4)">30天</div>

</div>

<div class="btnTitle">

<div class="btn-bg" :class="{bg:increase == 5}" @click="changeBg(5)">增量</div>

<div class="btn-bg" :class="{bg:increase == 6}" @click="changeBg(6)">总量</div>

</div>

// 在methods方法里面

data () {

time: 3,

increase: 5,

},

methods: {

changeBg (index) {

if (index === 3 || index === 4) {

this.time = index

} else if (index === 5 || index === 6) {

this.increase = index

} else {

this.sort = index

}

}

}

// css样式

<style lang="scss">

.bg {

background-color: rgb(12, 197, 89);

color: #fff;

}

.btnTitle {

display: flex;

width: 400px;

border: 1px solid #ccc;

background-color: #fff;

margin-left: 10px;

border-radius: 5px;

.btn-bg {

width: 50%;

height: 40px;

text-align: center;

line-height: 40px;

border-radius: 5px;

}

}

</style>

点击前点击前

点击后点击后

就这样简单的切换效果就达到了！！！！

附录：附录：vue-绑定绑定class实现动态切换按钮背景颜色实现动态切换按钮背景颜色

动态的绑定class

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38714637

粉丝: 5
资源: 922

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈