アウトプットするブログ

ブログの投稿ログ

2021年
9月
8月
7月
6月

Vueでアコーディオンを爆速作成する

Vueを使用してアコーディオンを爆速で作成する方法を知ったので紹介したいと思います。


今日のコード

codesandbox


vue側追加項目


// HelloWorld.vue

<template>
.......
    <div class="toggle">
      <button class="toggle-btn" @click="bool = !bool">クリック</button>
      <p v-if="bool">
        <img src="../assets/hiru.jpg" width="40%" />
        <br />
        <span>
          <br />
          ＿人人人人人人＿ <br />
          ＞　ハンバーガー!!! ＜ <br />
          ￣Y^Y^Y^Y^Y￣
        </span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      bool: false,
    };
  },
};
</script>

ボタンに指定したこの一行で表示/非表示を行っています。

@click="bool = !bool"

初期値はfalseとして、クリックを検知したらtrueへと変更します。
検知されたbooleanはv-if="bool"に渡されて、表示されるようになります。

おわり。