html
<DIV id="vue-app-one">
<h1>
{{this.title.split('').reverse().join('')}}
</h1>
<h2>
{{methodsmessage()}}
</h2>
<h3>
{{conputedmessage}}
</h3>
</DIV>
js
var one = new Vue({
el:"#vue-app-one",
data:{
title:"123a456a789a01b"
},
methods:{
methodsmessage:function(){
return this.title.split('a').reverse().join('');
}
},
computed:{
conputedmessage:function(){
return this.title.split('a').reverse().join('');
}
}
});
结果
b10a987a654a321
01b789456123
01bx789x456x123
vue的说明:
- 1、在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加().
- 2、两种方式在缓存上也大有不同,利用computed计算属性是将 conputedmessage与message绑定,只有当message发生变化时才会触发conputedmessage,而methods方式是每次进入页面都要执行该方法
- 3、在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式
参数说明:
- 1、splite('')可以将字符串按某个字符或者其他分割。返回数组。
- 2、reverse()该方法会改变原来的数组,而不会创建新的数组。此函数可以将数组倒序排列。
- 3、join('')方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ');结果呈现:第一个结果split('')和join('')什么都不加,则按字分割加入数组。split('a')按照a分割插入数组并删除a,join('x')将数组之间插入x然后排列.