Vue.js - 我有动态按钮，我希望单击一个按钮时颜色会发生变化 [英] Vue.js - I have dynamic buttons and I want that the color changes if I clicked one button
本文介绍了Vue.js - 我有动态按钮，我希望单击一个按钮时颜色会发生变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用 v-for 动态创建了按钮，现在我希望被点击的按钮改变颜色，而另一个具有相同的颜色.
<div id="exam-screen" class="exam jumbotron"><h1>{{title}}</h1><div class="row"><p class="col-md-6" v-bind:key="exam.id" v-for="exam in getExam"><按钮class="exam Exam-btn btn btn-secondary btn-lg btn-block"v-bind:id="exam-"+exam.id+-"+exam.season+-"+exam.year+-btn""><span>{{exam['season_de'] }} {{exam.year }} </span></p><div class="row"><p class="col-md-8"></p><BaseButton>{{ startButton }}</BaseButton>
</template>
我知道我需要一个 v-on:click 指令，但我不知道如何更改颜色...
我已经在 JavaScript 中实现了它，但我不知道它在 Vue.js 中是如何工作的...
我是如何在 JavaScript 中做到的:功能选择答案(ID){$(id).addClass("btn-primary");$(id).removeClass("btn-secondary");}功能取消选择答案(ID){$(id).addClass("btn-secondary");$(id).removeClass("btn-primary");}希望有人能帮我...
解决方案
您可以添加 &使用 @click & 从按钮中删除一个类:class 像这样:>
new Vue({el: "#myApp",数据: {项目:[{text: '这是按钮 1'},{text: '这是按钮 1'},{text: '这是按钮 3'}]},方法: {切换类(索引){this.items.forEach(item => item.active=false);让 item = this.items[index];item.active = !item.active;this.$set(this.items, index, item);}}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div id="myApp"><div v-for="(item, index) in items" :key="index"><按钮:class="{ 'btn-primary': item.active, 'btn-secondary': !item.active}"@click="toggleClass(index)"class="btn btn-md btn-block m-3"><span>{{ item.text }} </span>