javascript - Vue.js - 我有动态按钮,如果我点击一个按钮,我希望颜色会改变
问题描述
我已经使用 v-for 动态创建了按钮,现在我希望单击的按钮更改颜色,而另一个按钮具有相同的颜色。
<template>
<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">
<button
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>
</button>
</p>
</div>
<div class="row">
<p class="col-md-8"></p>
<BaseButton>{{ startButton }}</BaseButton>
</div>
</div>
</template>
我知道我需要一个 v-on:click 指令,但我不知道如何更改颜色...
我已经在 JavaScript 中管理过了,但我不知道它在 Vue.js 中是如何工作的......
How I do it in JavaScript:
function selectAnswer(id) {
$(id).addClass("btn-primary");
$(id).removeClass("btn-secondary");
}
function deselectAnswer(id) {
$(id).addClass("btn-secondary");
$(id).removeClass("btn-primary");
}
我希望有一个人可以帮助我...
解决方案
@click
您可以使用&:class
像这样从按钮中添加和删除一个类:
new Vue({
el: "#myApp",
data: {
items: [{text: 'This is Button 1'},{text: 'This is Button 1'},{text: 'This is Button 3'}]
},
methods: {
toggleClass(index) {
this.items.forEach(item => item.active=false);
let 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">
<button
:class="{ 'btn-primary': item.active, 'btn-secondary': !item.active}"
@click="toggleClass(index)"
class="btn btn-md btn-block m-3">
<span>{{ item.text }} </span>
</button>
</div>
</div>
请注意,这@click
只是 的简写,v-on:click
并且:class
只是 的简写v-bind:class
。此外,我们需要删除btn-secondary
我们最初为按钮设置的类,否则btn-primary
在单击按钮时不会生效。
推荐阅读
- web-scraping - 有没有办法防止内容缓存或从 API 中抓取?
- flutter - 附加到多个滚动视图的 ScrollController 断言失败:第 109 行 pos 12:'_positions.length == 1'
- android - Kotlin AndroidStudio 类型不匹配
- c++ - C++ std::function 参数 const 参考
- python - 如何使用 csv.dictreader 打印数据记录数?
- javascript - 检查是元素是在 JavaScript 中包装文本的最后一个节点
- python - Python 线程计数器
- vue.js - 如何一次处理 Vuex 中的对象突变
- youtube-dl - youtube-dl 和 aria2c - 基于带有 YouTube 链接的列表批量下载并根据文件名列表保存每个文件
- python - Visual Studio Code:当我检查 3 次时弹出“无效语法”