如果 Vue.js：class= 采用布尔值，如何根据字符串将类添加到右侧导航元素？

Question

我有一个简单的固定导航栏：

<nav class='navigation'>
<div :class="{ active: }" @click='scrollTo(".test1")'></div>
<div :class="{ active: }" @click='scrollTo(".test2")'></div>
<div :class="{ active: }" @click='scrollTo(".test3")'></div>
<div :class="{ active: }" @click='scrollTo(".test4")'></div>
</nav>

我还有一个名为activeSection的属性：

data() {
return {
activeSection: test1 // This is either test1, test2, test3 or test4 but let's use test1 for this example
}
}

现在，我正试图将类active应用于第一个导航元素(如果是activeSection == test1(，或应用于第二个导航元素，如果是activeSection == test2，依此类推，但我不知道如何做到这一点。

Answer 1

我认为这是一个非常简单的

<nav class='navigation'>
<div :class="{ active: activeSection==test1 }" @click='scrollTo(".test1")'> 
</div>
<div :class="{ active: activeSection==test2}" @click='scrollTo(".test2")'> 
</div>
<div :class="{ active: activeSection==test3}" @click='scrollTo(".test3")'> 
</div>
<div :class="{ active: activeSection==test4}" @click='scrollTo(".test4")'> 
</div>
</nav>

并且还需要更新scrollTo方法上activeSection的值https://v2.vuejs.org/v2/guide/class-and-style.html