Vue computed 计算属性

将msg这个字符串 反向 输出

html代码

// 普通实现
{{ msg.split('').reverse().join('') }}
// 计算属性实现 逻辑和数据分离
<p> {{ newMsg }} </p>

js代码

new Vue({
    el: '#app',
    data: {
        msg: 'I Love eat 葡萄 '
    },
    computed: {
        //计算属性中存放的都是方法
        newMsg () {
        return this.msg.split('').reverse().join('')
        }
    }
})

总结： 什么时候使用计算属性？

满足两个条件即可

1. 必须有逻辑处理，还有返回值
2. 使用的结果，要当做全局变量一样使用