使用vue 完成字符串翻转

关键方法 split() reverse join

• 首先定义UI

<template>
  <div class="wrap">
    <button @click="reverseFunc">点击翻转</button>
    <p>{{ msg }}</p>
  </div>
</template>

// 这里以翻转 hello Vue为例
data() {
    return {
      msg: "Hello Vue",
    };
  },

• 大家都知道字符串本身是没有翻转方法的 所以要借助数组的reverse 方法

 var strArr = this.msg.split("");
 // 得到 Array(9) [ "H", "e", "l", "l", "o", " ", "V", "u", "e" ]

• 把得到的数组翻转

  var reverseArr = strArr.reverse();
  // 得到  [ "e", "u", "V", " ", "o", "l", "l", "e", "H" ]

• 把翻转之后的数组利用空串拆分为数组

var reverseStr = reverseArr.join("");
// 得到 euV olleH

• 把最后的结果赋值

 this.msg = reverseStr;

简写为：

this.msg = this.msg.split("").reverse().join("");