Vue反转字符串及join(),reverse()与 split()函数用法解析

HTML

<div id="app">
　　<p>{{ massage }}</p>
　　<button @click="reverseMassage">反转字符串</button>
</div>

script

var vm = new Vue({
    el : ''#app',
　　data : {
　　　　massage:'hello vue'
　　},
　　methods : {
　　　　reverseMassage:function(){
　　　　　　this.massage= this.massage.split('').reverse().join('')
　　　　}
　　}
})

反转前：

 反转后：

 

---

解析：

split(' ')是分裂的意思，也就是把一个数据拆分

split(' ')会把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串的意思，如果不用就不会拆分成每个字符串

在控制台尝试输出：

console.log(this.message.split(''));　　//结果["e", "u", "v", " ", "o", "l", "l", "e", "h"]

reverse( )是翻转的意思，把数据反过来
message.reverse() == Not split //无效，因为只能对数组起作用
所以要跟在split(' ')后使用

console.log(this.message.split('').reverse())；　　//结果["h", "e", "l", "l", "o", " ", "v", "u", "e"]

join(' ')是重组的意思，把数组合成一个字符串
message.split('').join(' ')
slpit后会拆散会数组，join后就会变回原来的字符串了
所以我们要把数据反过来重组就可以用message.split(' ').reverse( ).join(' ')

 

 

 

参考文章：

Akiode　　https://blog.csdn.net/weixin_42553164/article/details/81218051