Question

鉴于以下内容：

<div id="#my-container">
    <div class="title">Companies</div>

    <div class="tab active tab-apple">Apple</div>
    <div class="tab tab-google">Google</div>
</div>

当页面加载时没有任何标签点击，无论哪个标签具有默认活动类，都需要进入.title div。对于上面的示例，<div class="title">Apple</div>
单击选项卡后，该类将切换为活动状态，并且vue.js需要再次更新.title div。

如何使用vue.js完成此操作？我已经尝试但无法按预期工作。

Answer 1

大卫的答案是一种方法。但Vuejs为此提供了在线计算。所以，不需要挂钩任何CSS事件。这里有一些代码可以解释：

创建数据属性active_tab，就像David提到的那样。然后就像他完成它一样绑定它的价值。在您的标签页中，添加点击事件，然后在该事件中为active_tab分配适当的值。

<div class="tab active tab-apple" @click="active_tab = Apple">Apple</div>
<div class="tab tab-google" @click="active_tab = Google">Google</div>

现在，要动态地将活动类分配给相应的选项卡，请创建class属性，一个计算属性，如下所示：

<div 
    :class="['tab', active_tab == 'Apple' ? 'active' : '', 'tab-apple']"
>
    Apple
</div>

这段代码基本上是做什么的，:class使类成为计算属性。然后数组中的逗号分隔语句。因此，计算将始终添加tab和tab-apple类。但是，只有if active_tab == 'Apple'然后?添加'active'其他:添加''

Answer 2

不确定您正在使用哪个CSS框架，但通常我会挂钩切换选项卡所引发的事件（许多CSS框架提供此访问权限）。一旦挂钩，您就可以编写一个Vue自定义指令，该指令将接受该事件并使用它来更新指示哪个选项卡处于活动状态的VM属性。

然后你可以使用普通的小胡子模板将它带入你的模板：

<div class="title">{{ active_tab }}</div>

vue.js - 根据默认/单击的类更改文本

2 个答案: