v-ifは、条件分岐を制御するディレクティブになります。
※v-if・v-else-if・v-elseの間にはタグを挿入しちゃダメ
記法
[ HTML ] =============================
<要素名 v-if=”条件式 or 値がtrue”>
表示内容
</要素名>
<要素名 v-else-if=”条件式 or 値がtrue”>
表示内容
</要素名>
<要素名 v-else>
表示内容
</要素名>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-ifについて</title>
</head>
<body>
<div id="app">
<p>ラジオボタンを選択してみてください。</p>
<div>
<label for="male">男性</label>
<input
id="male"
name="gender"
type="radio"
v-model="value"
value="male"
/>
<label for="female">女性</label>
<input
id="female"
name="gender"
type="radio"
v-model="value"
value="female"
/>
<label for="other">その他</label>
<input
id="other"
name="gender"
type="radio"
v-model="value"
value="other"
/>
</div>
<div v-if="value === 'male'">
<p>男性を選択しましたね。</p>
</div>
<div v-else-if="value === 'female'">
<p>女性を選択しましたね。</p>
</div>
<div v-else>
<p>その他を選択しましたね。</p>
</div>
</div>
<script src="./js/if.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
value: "male",
};
},
}).mount("#app");出力結果
ラジオボタンを選択してみてください。
男性を選択しましたね。
女性を選択しましたね。
その他を選択しましたね。