vue.js

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>

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

vue.js如何做到这一点？我已尝试但无法使其按预期工作。

Answer 1

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

然后您可以使用普通的小胡子模板将其放入您的模板中：

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

Answer 2

David 的回答是一种方法。但是 Vuejs 为此提供了 in-line 计算。因此，无需挂钩任何 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 动态分配给相应的选项卡，请创建 class 属性，计算属性，如下所示：

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

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

vue.js - 根据 default/clicked class 更改文本

vue.js - Change text based on default/clicked class