https://jp.vuejs.org/v2/guide/index.html
Vue.jsの「はじめに」を見ながらサンプルをつくってみた。
v-ifとv-on:clickで表示切替、
キャラ一覧はv-forとcomponentの2パターンで試してみた。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
#title {
background-color:#1ce;
}
</style>
</head>
<body>
<div id="app">
<div id="title"><a href="/vue.php">{{message}}</a></div>
<button class="btn btn-primary" v-on:click="showGacha">gacha</button>
<button class="btn btn-primary" v-on:click="showChara">chara</button>
<button class="btn btn-primary" v-on:click="showItem">item</button>
<div v-if="isGacha">
<p>ガチャ</p>
</div>
<div v-if="isChara">
<p>キャラ</p>
<div v-for="chara in charas">
{{chara.name}} Lv.{{chara.level}}
</div>
<hr>
<chara-detail v-for="chara in charas"
v-bind:chara="chara"></chara-detail>
<button class="btn btn-primary" v-on:click="addChara">add</button>
</div>
<div v-if="isItem">
<p>アイテム</p>
</div>
</div>
<script>
Vue.component('chara-detail', {
props: ['chara'],
template: `
<div>{{chara.name}} Lv.{{chara.level}}</div>
`
});
var app = new Vue({
el: '#app',
data: {
message: 'GAME',
isGacha: false,
isChara: false,
isItem: false,
charas: [
{name: 'ドッグ', level: 3},
{name: 'モンキー', level: 5},
{name: 'バード', level: 4}
],
},
methods: {
addChara: function() {
app.charas.push({name: 'タイガー', level: 22});
},
hideAll: function() {
app.isGacha = false;
app.isChara = false;
app.isItem = false;
},
showGacha: function() {
app.hideAll();
app.isGacha = true;
},
showChara: function() {
app.hideAll();
app.isChara = true;
},
showItem: function() {
app.hideAll();
app.isItem = true;
},
}
});
app.isGacha = true;
</script>
</body>
</html>
