v-bind,attr

v-on, @

<!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>

new Vue({
  el: '#app',
  // 問題1. 選択中のタブを管理する変数を用意しよう
  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">タブ1</li>
        <li>タブ2</li>
        <li>タブ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>

new Vue({
  el: '#app',
  // 問題1. 選択中のタブを管理する変数を用意しよう
  data: {}
})



    // =======================
    // テストコード
    // =======================
    const answer1 = 'active: 0';
    const answer2 = "'tab--active': active === 0";
    const answer3 = "'tab--active': active === 1";
    const answer4 = "'tab--active': active === 2";
    const answer5 = '@click="active = 0"';
    const answer6 = '@click="active = 1"';
    const answer7 = '@click="active = 2"';
    const questions = [
        {
            title: '問題1. 選択中のタブを管理する変数を用意しよう',
            tests: [
                {
                    title: 'data内にactiveを定義しましょう。',
                    hint: '`active: 0`と記述してください。',
                    test: () => isContainTextInEditor(answer1)
                }
            ]
        },
        {
            title: '問題2. タブメニューのクラスをバインディングしよう',
            tests: [
                {
                    title: '`タブ1`のクラスをバインディングしましょう。',
                    hint: '`:class="{ \'tab--active\': active === 0 }"`と記述してください。',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: '`タブ2`のクラスをバインディングしましょう。',
                    hint: '`:class="{ \'tab--active\': active === 1 }"`と記述してください。',
                    test: () => isContainTextInEditor(answer3)
                },
                {
                    title: '`タブ3`のクラスをバインディングしましょう。',
                    hint: '`:class="{ \'tab--active\': active === 2 }"`と記述してください。',
                    test: () => isContainTextInEditor(answer4)
                }
            ]
        },
        {
            title: '問題3. タブメニューをクリックしたら切り替えられるようにしよう',
            tests: [
                {
                    title: '`タブ1`をクリックしたら、`active`の値を0になるように実装しましょう。',
                    hint: '`@click="active = 0"`と記述してください。',
                    test: () => isContainTextInEditor(answer5)
                },
                {
                    title: '`タブ2`をクリックしたら、`active`の値を1になるように実装しましょう。',
                    hint: '`@click="active = 1"`と記述してください。',
                    test: () => isContainTextInEditor(answer6)
                },
                {
                    title: '`タブ3`をクリックしたら、`active`の値を2になるように実装しましょう。',
                    hint: '`@click="active = 2"`と記述してください。',
                    test: () => isContainTextInEditor(answer7)
                }
            ]
        }
    ];


タブメニューのクラスをバインディングしよう

v-show

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

v-for（配列とオブジェクト）

v-for / key, index

タブメニューをより簡潔にかきかえましょう

モダンなフロントエンド開発で人気のフレームワークの学習を通して、Webアプリケーションの作成について学んでいきます