点击反转字符串

最新推荐文章于 2025-12-05 20:35:03 发布

原创最新推荐文章于 2025-12-05 20:35:03 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js


<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>
<script>
    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 = '';
        }
      }
    })
</script>