問題
7
Vue.js
クリックでアクションを起こしてみよう！
Vue.jsの問題に挑戦しよう！
問題
「クリックでアクションを起こしてみよう！」
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¥
期待する画面
解答と解説（クリックでアクションを起こしてみよう！）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
VueでalertTextというメソッドを定義して、buttonがクリックされたら、
alertTextというメソッドが発動するしくみだ。
削除するときに本当に削除してもいいかを確認するときに多様するぞ。
