ログイン
問題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の場合このようにして実装する。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!