<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">

  <input type = "text" v-model = 'message'>

  <p>请输入原始字符串: {{ message }}</p>

  <button @click = "stringReverse">点我反转字符串</button>

  <p>计算后反转字符串: {{ newMessage }}</p>

  <button @click = "clear">点我清空</button>

</div>

var vm = new Vue({

  el: '#app',

  data: {

    message: '',

    newMessage: ''

  },

  methods: {

    // 计算属性的 getter

    stringReverse:function(){

      // `this` 指向 vm 实例

      this.newMessage = this.message.split('').reverse().join('');

    },

    clear:function(){

      this.message = '';

      this.newMessage = '';

    }

  }

})