【Vue】入門編(methods) - なんだかGoodVibes

こんにちは。
本日はVue.js入門編の続きです。

概要
- methodsとは
サンプルソース

概要

methodsとは

methodsを使用することで、
Vueインスタンスのメソッドに追加することができます。

methodsで定義すると、
テンプレート内からのアクセスも可能です。

サンプルソース

テキストボックスに入力をした際と、
ボタン押下の際に、methodsで定義したメソッドを呼び出します。

<body>
    <div id="app">
        <input type="text" v-model="item" v-on:input="display">
        <button v-on:click="register">登録</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: { item: 'hoge' },
            methods: {
                display: function() {
                    alert(`入力されました。 ${this.item}`)
                },

                register: function() {
                    alert(`登録しました。 ${this.item}`)
                }
            }
        })
    </script>
</body>

以上です。