【Vue.js】ディレクティブ（v-if、v-for）について

ディレクティブとは

ディレクティブとは、Vue.jsにおける独自の属性（v-○○）のことで、これを使うことでDOM操作ができる。
これによりDOM操作の記述を減らすことができ、開発スピードが向上する。
v-ifとv-forについて紹介する。

v-if

真偽値に基づいて要素の表示・非表示を切り替える。

html

<div id="app">
    <p v-if="displayFlag">Hello!!</p>
</div>

Vue

const sample = {
	data() {
		return {
			displayFlag: true,
		};
	},
};
Vue.createApp(sample).mount("#app");

上記のサンプルではdisplayFlag=trueの場合に「Hello!!」が表示され、falseの場合は非表示になる。

v-for

Vue.jsでのfor文。配列などのデータを表示させるために使う。v-for = <変数> in <配列名>のような形で書くことができる。

html

<div id="app">
    <ul>
        <li v-for="image in images">
            <img :src="image.src">
        </li>
    </ul>
</div>

Vue

const sample = {
	data() {
		return {
			images: [
				{ src: "image1.png" },
				{ src: "image2.png" },
			],
		};
	},
};
Vue.createApp(sample).mount("#app");