vue的split、reverse以及join的基本使用与使用讲解

最新推荐文章于 2024-07-04 04:27:11 发布

fei-好好学习

最新推荐文章于 2024-07-04 04:27:11 发布

阅读量2.5k

点赞数 1

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_46743083/article/details/105818601

版权

对Vue的split、reverse以及join做出一个基本的使用与原理讲解

splict (' ') 的作用是将数据切割成一个一个的单个字符，然后这个函数会以一个数组的方式将切割开的单个字符包含为一个数组。需要注意的是，这个函数里面包含着一堆单引号。而单引号的作用是将数据以一个字符串的形式来切割。使用时不能缺少。

reverse() 的作用是对数组的字符串进行一个倒序反转。【注】： reverse() 方法只对数组起作用。

join(' ') 是将多个字符串重新整合成一个字符串。

如果不够熟悉，我们可以用一个小案例来进行一个更好的理解

首先来看下效果图：（代码放在尾部）

第一部分：splict(' ') 的使用

在原本的vue的属性上，在data里定义了一个msg数据。 data: {msg:'123456'}
对 splict(' ') 的使用，我们要在Vue实例上创建一个 computed 属性，这个属性成为计算属性。然后在这个属性上我们就可以定义出我们使用函数返回的结果了。
首先定义函数，函数名可以自定义。这个函数要返回一个结果，返回的结果内容上，用代码展示出来为：

 msg_split:function(){//将字符串拆分为单个字符
            return this.msg.split('')
        },

代码的意思是将这个msg 数据以字符串的形式进行一个切割。最后返回的是一个数组：

splict(' ')切割出来的结果

第二部分：reverse( ) 的使用

然后第二部分上，reverse( ) 的作用是将字符进行一个倒序。这个倒序只支持对数组的倒序。在reverse( ) 的用法上，有：

    msg_reverse:function(){//拆分为单个字符后倒序
            return this.msg.split('').reverse()
       },

因为在第一部分中已经将数据进行切割成单个的字符了，所以我们可以在尾部接着写上一个reverse()方法。这样，结果就有：

对单个字符串的倒序结果

第三部分：join( ' ' ) 的使用

在前面的第一部分上我们已经把数据进行切割成单个的字符了（这些单个的字符属于一个数组之中），然后第二部分也对这个数组的字符进行倒序的排序了。最后我们只需要在其后再添加上 join( ' ' ) 方法即可。需要注意的是 join( ' ' ) 是需要一对单引号的。所以代码如下：

msg_join:function(){
         return this.msg.split('').reverse().join('')
       },

在代码的编译过后，由split、reverse以及join 三个方法的一起使用下，原本的 msg 数据经过改造后的效果如下：

在三个方法的使用下，数据已经倒序并且完整的输出来了

最后，展示完毕，谢谢！

以下为展示代码，代码仅供学习参考。引入代码时记得检查vue.js文件的引入路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对vue的split、reverse以及join的讲解</title>
</head>
<body>
    
<div id="app" class="container">

  <ol>
      <li>原样式：{{msg}}</li>
      <li>split切割样式：{{msg_split}}</li>
      <li>split + reverse样式：{{msg_reverse}}</li>
      <li>split + reverse + join样式：{{msg_join}}</li>
  </ol>

</div>


<script src="vue.min.js"></script>
<script>


var app = new Vue({
    el: '#app',

    data: {
      msg:'123456',

      list:[
          {id:1,name:'jack',age:18}
      ]
    },

    computed:{//计算属性的基本应用
    
        msg_split:function(){//将字符串拆分为单个字符
            return this.msg.split('')
        },
        msg_reverse:function(){//拆分为单个字符后倒序
            return this.msg.split('').reverse()
        },

        msg_join:function(){
          return this.msg.split('').reverse().join('')
          //拆分为字符串，再反转倒序过来，最后将全部归于一个字符串整合起来
        },

    },

    methods:{}
 
  
  
  
  }) 
  </script>





</body>
</html>