パソ君
・Vue.jsにて文字列を反転させる方法ある？
こんな疑問にお答えします。
実はVue.js（というかJavaScriptのコード）にて、簡単に文字列を反転させることが可能です。
あまり使うことはないと思いますが、今回自分用のメモとしてまとめてみました。
ジト
参考にどうぞ
ということで、この記事では「Vue.jsで文字列を反転させる方法」について解説していきます！
この記事でわかること
Vue.jsで文字列を反転させる方法
【解説】Vue.jsで文字列を反転させる方法【コード付き】
そんな文字列を反転させるコードがこちら↓
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseText()">文字列反転のボタン</button>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
}),
methods: {
reverseText() {
this.message = this.message.split('').reverse().join('');
}
}
}).mount('#app')
ボタンをクリックすると、文字列が反転します。
先ほどのサンプルで、文字列を反転させるために使うコードがこちらです↓
文字列.split('').reverse().join('')split(''): 文字列を文字ごとに分割。それぞれの文字を要素とする配列を作成reverse(): 作成された配列の要素の順序を逆転させるjoin(''): 逆転された配列の要素を再び一つの文字列に連結する
下記のようにすれば、reverseText()関数が呼び出されるたびにmessage内の文字列を反転させることができます。
reverseText() {
this.message = this.message.split('').reverse().join('');
}【解説】Vue.jsで文字列を反転させる方法【コード付き】：まとめ
- 「文字列.split(”).reverse().join(”)」を使う
ジト
Vue.jsにて文字列を反転させたい時はためしてみてね！
