gpt4 book ai didi

vue.js - 向子元素添加事件类

转载 作者:搜寻专家 更新时间:2023-10-30 22:32:23 24 4
gpt4 key购买 nike

我是 Vue.js(和 bootstrap-vue)的初学者,我想创建选项卡(比如 here)

<b-nav class="nav-tabs">
<b-nav-item v-bind:active=true v-bind:class="{ active : tab === 1 }" v-on:click="tab = 1">Link 1</b-nav-item>
<b-nav-item v-bind:class="{ active : tab === 2}" v-on:click="tab = 2">Link 2</b-nav-item>
<b-nav-item v-bind:class="{ active : tab === 3}" v-on:click="tab = 3">Link 3</b-nav-item>
</b-nav>

但是当我点击第二个链接时,它并没有改变 active=true(第一个按钮上的 active=false)。我试过了

v-on:click:active=true

但它不起作用。它适用于选项卡,但不适用于导航(例如 https://bootstrap-vue.github.io/docs/components/tabs )。有什么想法吗?

添加:

View 代码:

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
new Vue({
el: '#app',
data: {
tab: 1
},
});

最佳答案

不熟悉 bootstrap-vue,但我只是在他们的 playground 中做了一些玩弄,您需要绑定(bind)的是 active 属性,bootstrap 会处理它的样式。

换句话说,这似乎可行:

<b-nav class="nav-tabs">
<b-nav-item :active="tab === 1" @click="tab = 1">Link 1</b-nav-item>
<b-nav-item :active="tab === 2" @click="tab = 2">Link 2</b-nav-item>
<b-nav-item :active="tab === 3" @click="tab = 3">Link 3</b-nav-item>
</b-nav>

关于vue.js - 向子元素添加事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44678993/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com