v-show

<!DOCTYPE html>
<html lang="js">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div class="tab" id="app">
      <h1>タブ</h1>
      <ul class="tab__menu">
        <li :class="{ 'tab--active': active === 0 }" @click="active = 0">
          タブ1
        </li>
        <li :class="{ 'tab--active': active === 1 }" @click="active = 1">
          タブ2
        </li>
        <li :class="{ 'tab--active': active === 2 }" @click="active = 2">
          タブ3
        </li>
      </ul>

      <div class="tab__contents">
        
        <div v-show="active === 0">
          <p>タブ1を表示しています。</p>
        </div>
        <div v-show="active === 1">
          <p>タブ2を表示しています。</p>
        </div>
        <div v-show="active === 2">
          <p>タブ3を表示しています。</p>
        </div>
      </div>
    </div>

    <script src="main.js"></script>
  </body>
</html>

new Vue({
  el: '#app',
  data: {
    active: 0
  }
})


.tab {
  width: 50%;
  margin: 0 auto;
}

.tab > h1 {
  font-size: 36px;
  font-weight: normal;
  text-align: center;
}

.tab > ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
}

.tab > ul > li {
  display: block;
  padding: 10px 20px;
  margin: 0 5px -1px 0;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.tab > ul > li:hover {
  border-color: #ccc;
}

.tab > ul > .tab--active {
  border-color: #ccc;
  background-color: #fff;
}

.tab__contents {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 0;
  text-align: center;
}

.tab__contents p {
  margin: 0;
  padding: 40px;
}


<!DOCTYPE html>
<html lang="js">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div class="tab" id="app">
      <h1>タブ</h1>
      <ul class="tab__menu">
        <li :class="{ 'tab--active': active === 0 }" @click="active = 0">
          タブ1
        </li>
        <li :class="{ 'tab--active': active === 1 }" @click="active = 1">
          タブ2
        </li>
        <li :class="{ 'tab--active': active === 2 }" @click="active = 2">
          タブ3
        </li>
      </ul>

      <div class="tab__contents">
        
        <div>
          <p>タブ1を表示しています。</p>
        </div>
        <div>
          <p>タブ2を表示しています。</p>
        </div>
        <div>
          <p>タブ3を表示しています。</p>
        </div>
      </div>
    </div>

    <script src="main.js"></script>
  </body>
</html>


    // =======================
    // テストコード
    // =======================
    const answer1 = '<div v-show="active === 0"';
    const answer2 = '<div v-show="active === 1"';
    const answer3 = '<div v-show="active === 2"';
    const questions = [
        {
            title: '問題1. タブコンテンツの表示を切り替えよう',
            tests: [
                {
                    title: 'activeの値が0のとき、`タブ1`を表示しましょう。',
                    hint: '`v-show="active === 0"`と記述してください。',
                    test: () => isContainTextInEditor(answer1)
                },
                {
                    title: 'activeの値が1のとき、`タブ2`を表示しましょう。',
                    hint: '`v-show="active === 1"`と記述してください。',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: 'activeの値が2のとき、`タブ3`を表示しましょう。',
                    hint: '`v-show="active === 2"`と記述してください。',
                    test: () => isContainTextInEditor(answer3)
                }
            ]
        }
    ];


タブコンテンツの表示を管理しよう