Javascript 如何使用语义UI在Vue中切换选项卡 简单例子

在中，他们有一个关于如何在选项卡之间切换的示例（我也在本文中介绍了这个示例）：

HTML

<div class="ui top attached tabular menu">
  <a class="item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item active" 
        data-tab="hello"
        @click="switchTab()"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        @click="switchTab()"
      >
        World
      </a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="hello">
      <p>Greetings!</p>
    </div>
    <div class="ui bottom attached tab segment" data-tab="world">
      <p>Earth!</p>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item" 
        data-tab="hello"
        :class="{ active: isHelloActive }"
        @click="switchTabs('hello')"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        :class="{ active: isWorldActive }"
        @click="switchTabs('world')"
      >
        World
      </a>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="hello"
      :class="{ active: isHelloActive }"
    >
      <p>Greetings!</p>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="world"
      :class="{ active: isWorldActive }"
    >
      <p>Earth!</p>
    </div>
  </div>
</div>

这在一个简单的web页面中非常有效

Vue示例1 然而，在Vue中，我的代码似乎不起作用（添加了

jquery

、

semantic.js

、和

semantic.css

资源）：

HTML

<div class="ui top attached tabular menu">
  <a class="item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item active" 
        data-tab="hello"
        @click="switchTab()"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        @click="switchTab()"
      >
        World
      </a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="hello">
      <p>Greetings!</p>
    </div>
    <div class="ui bottom attached tab segment" data-tab="world">
      <p>Earth!</p>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item" 
        data-tab="hello"
        :class="{ active: isHelloActive }"
        @click="switchTabs('hello')"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        :class="{ active: isWorldActive }"
        @click="switchTabs('world')"
      >
        World
      </a>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="hello"
      :class="{ active: isHelloActive }"
    >
      <p>Greetings!</p>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="world"
      :class="{ active: isWorldActive }"
    >
      <p>Earth!</p>
    </div>
  </div>
</div>

单击选项卡确实会登录到控制台，但jQuery不会执行

Vue示例2 我认为在Vue中使用jQuery可能有问题，所以我尝试了另一种方法，将

active

class属性动态附加到选项卡

你可以在这里查看代码

HTML

<div class="ui top attached tabular menu">
  <a class="item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item active" 
        data-tab="hello"
        @click="switchTab()"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        @click="switchTab()"
      >
        World
      </a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="hello">
      <p>Greetings!</p>
    </div>
    <div class="ui bottom attached tab segment" data-tab="world">
      <p>Earth!</p>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item" 
        data-tab="hello"
        :class="{ active: isHelloActive }"
        @click="switchTabs('hello')"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        :class="{ active: isWorldActive }"
        @click="switchTabs('world')"
      >
        World
      </a>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="hello"
      :class="{ active: isHelloActive }"
    >
      <p>Greetings!</p>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="world"
      :class="{ active: isWorldActive }"
    >
      <p>Earth!</p>
    </div>
  </div>
</div>

当我单击某个特定选项卡时，控制台会被适当地记录下来，但它仍然不会切换

如何使用语义UI在Vue中切换选项卡？我还想使用许多其他语义模块，它们使用jQuery来运行

---

我还对没有

选项卡
模块感到失望。
我已经找出了问题所在

Vue不能很好地使用jQuery
Vue不能很好地处理与它没有牢固集成的UI框架（有库，但它没有基本语义UI所具有的所有功能）
为了引用组件级变量，您需要使用
this
。否则，Vue不会抛出错误，因此很难调试。工作示例显示了一个工作示例
我的问题在中得到了回答，如果您有特定于Vue的问题，您应该将其用作资源。
您正在以比实际更复杂的方式处理此问题。首先创建选项卡名称的对象数组：hello，world..并使用v-for循环和渲染，同时您可以使用@click事件来侦听单击的选项卡。。.我正在工作，如果你没有答案，请打电话给我，我稍后会试着举一个有效的例子