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