ログイン
問題9

文字を反転させてみよう!

アイコン画像

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

コメントのアイコン解説

これはVue側で`reverseText`という関数を作ってそれをクリックしたとき実行するようにしているぞ。
他の言語だと、.reverse()だけで反転させることができるが、Vueの場合このようにして実装する。
ログインして解答を見る
Vueを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる