禁用 Vue 中未点击的按钮.JS

Question

我有两个确认按钮，当用户单击一个按钮时，它应该禁用另一个按钮，同时当用户单击"是"按钮时显示 span 元素的内容。

你会认为它有效，因为我只能设置一个默认值，哪个按钮被"禁用"。两者都应在页面加载时以启用状态启动。我还想在启用哪个按钮和禁用哪个按钮之间切换btnClicked类。

我快到了，但我只是不知道下一步会是什么。(也刚刚开始学习 Vue.JS如果有人能看看这个片段并告诉我我做错了什么，我将不胜感激。

var app = new Vue({
el: '#app',
data: {
disabled: 0,
},
});

.btnClicked{
background: green;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="disabled = (disabled + 1) % 2, $event.target.classList.toggle('btnClicked')"  :disabled="disabled == 1">Yes</button>
<button @click="disabled = (disabled + 1) % 2, $event.target.classList.toggle('btnClicked')"  :disabled="disabled == 0">No</button>

<span v-if="disabled == 1" class="showifYes">You just clicked Yes</span>
</div>

Answer 1

你的意思是这样的？

var app = new Vue({
el: '#app',
data: {
disabled: null,
},
});

.btnClicked{
background: green;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button :class="(disabled === 1) ? 'btnClicked' :  ''" @click="disabled = (disabled + 1) % 2"  :disabled="disabled === 1">Yes</button>
<button :class="(disabled === 0) ? 'btnClicked' :  ''" @click="disabled = (disabled + 1) % 2"  :disabled="disabled === 0">No</button>

<span v-if="disabled == 1" class="showifYes">You just clicked Yes</span>
</div>