MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. templeteタグ

templeteタグ

Vue.js
2023.08.03

templeteタグは、Vueコンポーネント内で動的にレンダリングするコンテンツを定義するために使用します。
※templeteタグ自体はDOMにレンダリングされない

templete
記法

<template>内容</template>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>templateタグについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app"></div>
    <div id="app2"></div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// templateタグなしの例
Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: "アイテム1", show: true },
        { id: 2, name: "アイテム2", show: false },
        { id: 3, name: "アイテム3", show: true },
      ],
    };
  },
  template: `
    <div>
      <p class="example-title">templateタグなしの例</p>
      <ul class="item-list">
        <li class="item" v-for="item in items" :key="item.id">
          <span v-if="item.show">{{ item.name }}</span>
        </li>
      </ul>
    </div>
  `,
}).mount("#app");

// templateタグありの例
Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: "アイテム1", show: true },
        { id: 2, name: "アイテム2", show: false },
        { id: 3, name: "アイテム3", show: true },
      ],
    };
  },
  template: `
    <div>
      <p class="example-title">templateタグありの例</p>
      <ul class="item-list">
        <template v-for="item in items" :key="item.id">
          <li class="item" v-if="item.show">{{ item.name }}</li>
        </template>
      </ul>
    </div>
  `,
}).mount("#app2");
#app,
#app2 {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.example-title {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.item-list {
  list-style-type: none;
  padding: 0;
}

.item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}
出力結果
Vue.js