VueJs开关按钮颜色
VueJs开关按钮颜色
提问于 2022-06-28 19:23:35
我是VueJS的新手，我需要一个例子，当点击两个按钮时，如何在它们之间切换颜色。
例如:当我点击白色按钮时，它变成黑色，另一个变成白色，反之亦然。
回答 3
Stack Overflow用户
发布于 2022-06-28 20:09:19
在模板中：
<div class="button-wrapper" :class="{'one-is-active': state.oneIsActive}">
<div class="button one" @click="toggleButton()" />
<div class="button two" @click="toggleButton()" />
</div>在您的设置(这只是一个建议，您也可以使用一个参考或其他什么；可能不同的版本)：
const state = reactive({
oneIsActive: true,
});
function toggleButton() {
state.oneIsActive = !state.oneIsActive;
}您的SCSS (在纯css或sass中可能略有不同)：
.button-wrapper {
.one {
background: white;
}
.two {
background: black;
}
&:not(.one-is-active) {
.one {
background: black;
}
.two {
background: white;
}
}
}Stack Overflow用户
发布于 2022-06-28 20:12:49
如果我正确理解，您希望具有类似于单选按钮组的功能，如果您单击其中一个按钮组，则希望另一个按钮的颜色恢复。
为此，按钮需要共享状态。
在何处/如何共享此状态可以通过多种不同的方式实现，但在本例中，我将建议将其存储在父组件中。状态也可以使用组合API或options来实现，我将根据经验假设选项可能更适合。
<script>
export default {
data() {
return {
selected: 0
}
},
}
</script>
<template>
<button :class="{red:selected == 1}" @click="selected = 1">
Button 1
</button>
<button :class="{red:selected == 2}" @click="selected = 2">
Button 2
</button>
</template>
<style>
.red{
background: red;
}
</style>Stack Overflow用户
发布于 2022-06-29 07:06:59
试试这个
new Vue({
el: '#app',
data: {
buttons: [{
name: 'Button 1',
bgColor: 'black',
color: 'white'
}, {
name: 'Button 2',
bgColor: 'white',
color: 'black'
}]
},
methods: {
updateColor() {
this.buttons.forEach(btn => {
btn.bgColor = (btn.bgColor === 'black') ? 'white' : (btn.bgColor === 'white') ? 'black' : btn.bgColor
btn.color = (btn.color === 'white') ? 'black' : (btn.color === 'black') ? 'white' : btn.cColor
});
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(b, index) in buttons" :key="index">
<button
:style="{ 'color': b.color, 'background-color': b.bgColor }"
@click="updateColor">
{{ b.name }}
</button>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72792106
复制相关文章
相似问题
腾讯云开发者
