vue实现文字翻转效果

步骤/思路：

• 定义变量 message:‘HELLO, WORLD’
• 插值表达式赋予到dom上, 准备按钮和文字
• 按钮绑定点击事件和函数
• 对message值用split拆分, 返回数组
• 数组元素翻转用reverse方法
• 再把数组用join拼接成字符串赋予给message
• 因为Vue是MVVM设计模式, 数据驱动视图, 所以视图自动改变

<template>
  <div id="app">
    <p>{{message}}</p>
    <button @click="reserve">翻转</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      message: 'hello world'
    }
  },
  methods: {
    reserve(){
      // 截取字符串返回数组
      let arr = this.message.split('');
      // 翻转
      arr.reverse();
      //将数组拼接成字符串
      this.message = arr.join('');
    }
  }
}
</script>