我在用vue实现javascript代码时遇到问题

Question

我是vuejs.Am的新手，尝试用vue复制javascript。其中用户可以切换按钮。我有一个按钮列表，我想切换活动类，但从所有其他按钮中删除活动类。。有没有更好的方法可以在不使用querySelector的情况下编写函数？我真的被卡住了。。

<template>
<div @click="selectItem" class="menu-tabs">
<button type="btn" class="menu-tab-item active" data-target="#remis-transfer"> Transfer
</button>
<button type="btn" class="menu-tab-item text-muted" data-target="#bank-transfer">
Transfer Money
</button>
<button type="btn" class="menu-tab-item text-muted" data-target="#fueling">
Fueling
</button>
</div>
</template>
<script>
export default {
methods: {
selectItem(e) {
if (e.target.classList.contains("menu-tab-item") && !e.target.classList.contains("active")) {
const target = e.target.getAttribute("data-target")
menuTabs.querySelector(".active").classList.remove("active");
e.target.classList.add("active");
const menuSection = document.querySelector(".menu-section");
menuSection.querySelector(".menu-tab-content.active").classList.remove("active");
menuSection.querySelector(target).classList.add('active');
}
}
}
}
</script>

Answer 1

查看代码

var Main = {
data() {
return {
active: 0,
buttonList: [
{
text: "Transfer",
target: "#remis-transfer",
},
{
text: "Transfer Money",
target: "#bank-transfer",
},
{
text: "Fueling",
target: "#fueling",
},
],
};
},
methods: {
selectItem(i) {
this.active = i;
},
},
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
<div class="menu-tabs">
<button
type="btn"
class="menu-tab-item"
v-for="(item, index) in buttonList"
:class="[{ active: active == index }, { 'text-muted': active != index }]"
:data-target="item.target"
:key="index"
@click="selectItem(index)"
>
{{ item.text }}
</button>
</div>
</div>

Answer 2

您可以简单地定义一些状态，如：

data() {
return {
myActiveClass: 'active',
myMutedClass: 'text-muted'
}
},

并将此myActiveClass和myMutedClass状态传递给您的元素，如下所示：class=menu-tab-item ${myMutedClass} ${myActiveClass}

有了这种方法，你可以快速实现你想要的。因此，当您希望元素不处于活动状态时，可以在函数中使myActiveClass=''，或者如果您希望文本失去静音类，可以说myMutedClass=''。只要确保以你想要的方式与各州打交道。