Vue-05
2018-09-17 本文已影响0人
三岁就很酷耶
计算属性:用来处理复杂逻辑操作的
在Vue.js中有了计算属性这种方法,可以避免在模板中加入过度的业务逻辑,保证更好的结构清晰和后期维护的效率
例:将Hello World改成World=Hello的格式
在new Vue中的数据
data:{
msg:"Hello World"
}
使用api,在h5标签里改为World=Hello的格式
<h5>{{msg.split(" ").reverse().join("=")}}</h5>
先将"Hello World"通过空格部分分割成"Hello"和"World"两个字符串,然后将两个字符串调换位置,最后用连接符“=”连接
但是使用这种方法的情况下,如果使用次数较多,则不便于后期的维护,因此用计算属性可以起到更好的作用
computed:{
revMsg:function(){
return this.msg.split(" ").reverse().join("=")
}
}
这种方法更便于维护,要修改的只是computed中的数据