コリラボ

技術の学びの備忘録

Vue.js

Vue.js文字列を逆転させる

Vue.js文字列を逆転させる

今回は文字列を逆転させるスクリプトを書いてみたいと思います。

動くサンプル

動くサンプルはこちら

HTML側はこう書いた

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

ハマったところ

特になし

スクリプト側はこう書いた

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

ハマったところ

split('')で文字を分裂させる。

完成版

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
        </script>
</html>