Vue method与computed的区别(最清晰的讲解)
html<DIV id="vue-app-one"> <h1> {{this.title.split('').reverse().join('')}} </h1> <h2> {{methodsmessage()}}
·
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说明:
- 在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加().
- 两种方式在缓存上也大有不同,利用computed计算属性是将 conputedmessage与message绑定,只有当message发生变化时才会触发conputedmessage,而methods方式是每次进入页面都要执行该方法
- 在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式
参数说明:1、splite('')可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组,而不会创建新的数组。此函数可以将数组倒序排列。
3、join('')方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ');
结果呈现:第一个结果split('')和join('')什么都不加,则按字分割加入数组。split('a')按照a分割插入数组并删除a,join('x')将数组之间插入x然后排列.
更多推荐
已为社区贡献1条内容
所有评论(0)