Vue
LINEでログイン
Googleでログイン
Twitterでログイン問題9：文字を反転させてみよう！
クリックすると、画面に表示されている文字が反転する
ボタンを作ってみよう。
普通の文字列操作だとうまく行かないから少し工夫が必要だぞ。
ボタンを作ってみよう。
普通の文字列操作だとうまく行かないから少し工夫が必要だぞ。
あらかじめエディタに書くコード
<div id="app">
<p>{{ greet }}</p>
<button v-on:click="reverseText">文字が反対になるよ!</button>
</div>
¥Vue¥
期待する画面
解答ソースコード
var reverse = new Vue ({
el: "#app",
data: {
greet: "Hello NinjaCode!"
},
methods: {
reverseText: function() {
this.greet = this.greet.split('').reverse().join(' ')
}
}
})
¥Vue¥
完了にする！
活動記録をTweetする
他の言語だと、.reverse()だけで反転させることができるが、Vueの場合このようにして実装する。