Vue
LINEでログイン
Googleでログイン
Twitterでログイン問題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¥
完了にする！
活動記録をTweetする
alertTextというメソッドが発動するしくみだ。
削除するときに本当に削除してもいいかを確認するときに多様するぞ。