問題

9
Vue.js

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

Vue.jsの問題に挑戦しよう!

問題

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

クリックすると、画面に表示されている文字が反転する
ボタンを作ってみよう。
普通の文字列操作だとうまく行かないから少し工夫が必要だぞ。

あらかじめエディタに書くコード

                    <div id="app">
  <p>{{ greet }}</p>
  <button v-on:click="reverseText">文字が反対になるよ!</button>
</div>
¥Vue¥
                

期待する画面

解答と解説(文字を反転させてみよう!)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

これはVue側で`reverseText`という関数を作ってそれをクリックしたとき実行するようにしているぞ。
他の言語だと、.reverse()だけで反転させることができるが、Vueの場合このようにして実装する。

さらにスキルアップしたい方は公式LINEから「Vue.js」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら
最大100,000円OFF 対象期間中に初めて無料相談にお申し込みされた方へ 無料相談はこちら