Vue计算属性

  1. 数组的join()
    用法:把数组的所有元素拼接起来成一个新的字符串,默认中间用逗号连接,你也可以指定其他字符
var elements = ["fire","wind","rain"]
elements.join() // "fire,wind,rain"
elements.join('') // "firewindrain"
elements.join('-') // "fire-wind-rain"
  1. 计算属性还是属性,在 {{ }} 内使用的时候不需要加圆括号。而method需要加圆括号
<div>通过computed返回的时间戳: {{timeByComputed}}</div>
<div>通过methods返回的时间戳: {{timeByMethods()}}</div>
  1. 计算属性不仅依赖计算属性,还可依赖其他实例的属性。
var app2 =  new Vue({
        data: {
            msg: 'hhhhh'
        }
    })
var app1 = new vue({
    .......
    computed: {
        messages: function () {
                return app2.msg // 可以使用其他实例的属性
            }
    }
    
})
  1. 计算属性默认都有get方法和set方法。当数据改变时,默认调用set方法
fullname: function(){
    return this.firstname + '-' + this.lastname
}
             
fullname: {
    get: function(){
        return this.firstname + '-' + this.lastname
    },
    set: function (value) {
        var nameString = value.split('-')
        this.firstname = nameString[0]
        this.lastname = nameString[1]
    }
}

app1.fullname = 'Jay-Chou' // 此时会调用set方法
区别 computed methods
需要加括号吗 不需要 在{{}}内需要,在监听事件调用method的时候不需要
值怎么改变 依赖的数据变化我才变化 页面每渲染一次就重新执行
其他 计算属性默认都有get方法和set方法。当数据改变时,默认调用set方法
总结 如果你想使用缓存应该使用计算属性
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容