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中的数据

上一篇下一篇

猜你喜欢

热点阅读