目标:实现一个点击文字,将该段文字颠倒显示的功能。
原理:
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>
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>