vue button之反转信息的使用

最新推荐文章于 2023-12-14 17:29:37 发布

敲代码无敌小奶龙

最新推荐文章于 2023-12-14 17:29:37 发布

阅读量789

点赞数 1

分类专栏： vue button 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53986004/article/details/127277927

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

button

1 篇文章 0 订阅

订阅专栏

2022.10.12今天我在学习vue的过程中学会了如何使用button按钮做一个信息的反转事件，首先我们先了解到什么是信息的反转，反转就是把原来正的数据给它倒过来重新打印，例如：Hello反转之后就是olleH，这就是所谓的信息反转，那么我们应该怎么实现它呢？

首先创建一个html文件，引入vue.js然后在body里面写一个button按钮进行点击按钮事件的编写，如：

<body>
  <div id="app">
      <!-- button反转消息 -->
        <p>{{message}}</p>   
        <button @click="reverseMessage">反转消息</button>
  </div>
 
</body>

然后我们在script里面编写相对应的方法：

<script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello vue.js!',
            },
            methods: {
                reverseMessage() {
                    // split()： 方法用于把一个字符串分割成字符串数组。
                    // reverse()： 方法用于颠倒数组中元素的顺序。
                    // join() ：方法也就是把数组中的所有元素以字符串的形式输出
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>

方法记得加（），这样写好之后就可以进行信息的反转，效果如图所示：