ログイン
問題7

クリックでアクションを起こしてみよう!

アイコン画像

問題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¥
            

コメントのアイコン解説

VueでalertTextというメソッドを定義して、buttonがクリックされたら、
alertTextというメソッドが発動するしくみだ。
削除するときに本当に削除してもいいかを確認するときに多様するぞ。
ログインして解答を見る
Vueを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる