Vue.js实现简单的按钮点击改变css样式

本人是前端的初学者，也在自学Vue.js,在自己编写系统的过程遇到的小问题，在这里分享给大家，若有什么不对的地方还请各位指正喔(づ￣ 3￣)づ

一、效果

二、前端代码

这是静态页面代码部分（就两个简单的按钮组件，绑定了两个事件）

<template><div class="test"><button @click="mgebtn" :class="{'Color':mgeColor}">按钮1</button><button @click="pwdbtn" :class="{'Color':pwdColor}">按钮2</button></div>
</template>

css样式的部分

<style>button{padding: 20px;color: #555;}.Color{background-color: #ffd700;color: #fff;}
</style>

三、vue.js代码

其实就是利用了vue.js的样式绑定的内容，mgeColor和pwdColor属性为true的时候，绑定的Color样式是执行的，反之mgeColor和pwdColor属性为false的时候绑定的Color样式是不执行的，所以点击按钮1触发mgebtn事件，将mgeColor和pwdColor默认值进行改变，以达到样式的改变，按钮2的绑定事件也是同理的。

这是script部分的代码

<script>
export default {name: 'test',data () {return {mgeColor: true,pwdColor: false}},methods: {pwdbtn () {this.mgeColor = falsethis.pwdColor = true},mgebtn () {this.mgeColor = truethis.pwdColor = false}}
}
</script>

四、代码汇总

以下是代码的汇总(～￣▽￣)～

<template><div class="test"><button @click="mgebtn" :class="{'Color':mgeColor}">按钮1</button><button @click="pwdbtn" :class="{'Color':pwdColor}">按钮2</button></div>
</template><script>
export default {name: 'test',data () {return {mgeColor: true,pwdColor: false}},methods: {pwdbtn () {this.mgeColor = falsethis.pwdColor = true},mgebtn () {this.mgeColor = truethis.pwdColor = false}}
}
</script><style scoped>button{padding: 20px;color: #555;}.Color{background-color: #ffd700;color: #fff;}
</style>

以上就是本人所分享的内容啦（虽然有点简单(●ˇ∀ˇ●)，但是肯定有些小萌新的），若有什么不对的地方还请各位大佬多多指正喔(づ￣ 3￣)づ

Vue.js实现简单的按钮点击改变css样式相关推荐

Js 通过点击改变css样式
通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
vue.js更改颜色_如何使用Vue.js实现简单的标题更改应用程序
vue.js更改颜色 by Anoob Bava 通过Anoob Bava 如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title chang ...
仿vue.js实现简单模板引擎（2kB）
仿vue.js实现简单模板引擎(2kB) 点击预览 index.html <!DOCTYPE html> <html lang="zh-CN"> <h ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
html5取消下拉菜单,Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)...
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击 ...
ios基础考试题1，实现按钮点击改变位置和图片的透明度和动画的使用
ios基础考试题1,实现按钮点击改变位置和图片的透明度和动画的使用考察frame,center,bounds的坐标,改变,动画的使用,图片容器的UIImageView的透明度等知识 oc写法 // ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
vue点击切换css样式
vue动态点击切换css样式 <template><div v-for="i in 5" class="el-personal" :class ...
关于Vue.js的v-for，key的顺序改变，影响过渡动画表现
关于Vue.js的v-for,key的顺序改变,影响过渡动画表现这个问题是在写Message组件出现的,先看代码部分子组件: #Notice:<transition :name=" ...