vu学习笔记--reverse(),split(),join()方法

目标:实现一个点击文字,将该段文字颠倒显示的功能。
原理:
1.用@click="handleclick" 指令,点击触发文字颠倒效果。
2.用split('')将文字根据空格打散,然后用reverse()颠倒文字,然后再join('')把颠倒的文字加空格组合起来。

html:
<div id="app">
<div @click="handleclick">
{{mes}}
</div>
</div>

javascript:
var vm=new Vue({
el:"#app",
data:{
mes:"点击这段话,将会颠倒顺序"
},
methods:{
handleclick:function(){
this.mes = this.mes.split('').reverse().join('')
}
}
})

1.reverse() 方法用于颠倒数组中元素的顺序,该方法会改变原来的数组,而不会创建新的数组。

2.split() 方法用于把一个字符串分割成字符串数组,如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割,这就实现了上面分隔的效果。
如:
<script type="text/javascript">
var arr = new Array(3)
arr = "George"
document.write(arr.split(''))
</script>


20180904005338.png

3.join() 方法用于把数组中的所有元素放入一个字符串,与split() 相对应。
如:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join(''))
</script>


20180904005444.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容