前提
目的
- Vue.jsで学んだことの復習
- ボタンをクリックしたときに数字がリアルタイムで減るようにしたい
- ある一定の数値になったらメッセージを変更したい
注意
- 学び始めのため知識不足はご容赦ください。
- 今回はCDNを使用しているので必要に応じてVue.jsの３とブートストラップのものをheadに追加してください。
v-onについて
<body>
<!-- 表示のためのタグ -->
<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
<button class="mx-5 my-1" @click="open">押</button>
<p class="mx-5">{{ bomAleat }}</p>
<p class="mx-5">ライフ：{{ bomCount }}</p>
</div>
<!-- Vue3のスクリプト -->
<script>
const appdata ={
data(){
return {
bomAleat: '押すと爆発',
bomCount: 20
}
},
methods: {
open(){
if(this.bomCount > 1){
this.bomCount--;
}else if(this.bomCount == 1){
this.bomAleat = '大爆発';
this.bomCount--;
}else{
this.bomCount--;
return this.bomAleat = 'お前はもう死んでいる'; }
}
}
}
Vue.createApp(appdata).mount('#app')
</script>
</body>
今回は上記のように記載しました。僕の世代でも北斗の拳はよく見ておりました。
v-onで学んだのは下記の３点です
-
v-onというもの自体がVue.js独自のディレクティブ（属性）であるということ
-
ボタンをクリックしたときに設定していた動作を作動させることができる
-
イベント修飾子やキー修飾子など使い方は多岐にわたる
今回はmethodsでopenというメソッドを作成。その中のif分岐でbomAleatの中身を変化させてみました。
本当はここにタイマー機能なども入れるつもりでしたがそれはまた別の機会に。