条件を満たすときに表示
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label for="check"><input id="check" type="checkbox" v-model="show">表示</label>
<p v-if="show">チェックボックスはON</p>
</div>
<!-- Vue アプリケーション -->
<script>
const { createApp } = Vue;
createApp({
data: function(){
return {
show: false
};
}
}).mount('#app');
</script>
</body>
</html>
複数の条件を指定する
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label for="red"><input id="red" type="radio" value="red" v-model="show">RED</label>
<label for="blue"><input id="blue" type="radio" value="blue" v-model="show">BLUE</label>
<p v-if="show == 'red'">赤が選択</p>
<p v-else-if="show == 'blue'">青が選択</p>
<p v-else>どちらも選択されていません</p>
</div>
<!-- Vue アプリケーション -->
<script>
const { createApp } = Vue;
createApp({
data: function(){
return {
show: ""
};
}
}).mount('#app');
</script>
</body>
</html>
