v-on:clickで文字を反転させる

はじめに

Vue.jsを学習中の備忘録としてアウトプット。
Vue.jsはスッキリしてていいですね。

結果

See the Pen Vue.js反転 by morioka (@rm5912) on CodePen.

vue.js

const app= new Vue ({
    el: "#app",
    data: {
        message: 'Hello World'
    },
    methods: {
        reverseMessage: function() {
            this.message =
            this.message.split('').reverse('').join('')
        }
    }
})

elでidを指定して,
dataの中にmessageを記述。
methodsでreverseMessageメソッドを作成して
メッセージをsplitで区切ってから反転、joinで結合して返してます。

index.html

<div id = "app">
    <p>
        {{ message }}
    </p>
    <button v-on:click="reverseMessage">メッセージ反転</button>
</div>

マスタッシュ構文でmessagemを囲んで表示。
v-on:clickにメソッドを指定してイベント発火するようにしてあります。