Vue
Googleでログイン問題7：クリックでアクションを起こしてみよう！
Vueのv-on:clickを使って見本のようなアラートを表示させてみよう！
あらかじめエディタに書くコード
<div id="app">
<p>{{ greet }}</p>
<button v-on:click="alertText" class="alert_btn">Alert!</button>
</div>
<style>
.alert_btn {
width: 30%;
padding: 1rem;
margin: 1rem auto;
color: #ffffff;
background: #40b983;
font-weight: bold;
}
</style>
¥Vue¥
期待する画面
解答ソースコード
<script>
var reverse = new Vue ({
el: "#app",
methods: {
alertText: function() {
alert("I'm Ninja!!")
}
}
})
</script>
¥Vue¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
alertTextというメソッドが発動するしくみだ。
削除するときに本当に削除してもいいかを確認するときに多様するぞ。