vue计算属性

使用计算属性的条件：对于任何复杂逻辑

<!-- 
        计算属性
        形式：方法
        仅在创建VUE对象时调用1次，实际存储的是方法的返回值
        仅在创建VUE对象或修改了关联呢属性时调用1次

     -->
    <div id="app">
        <p>{{msg}}</p>
        <p>{{msgAttr}}</p>
        <p>{{msgMd()}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               msg:"足球，篮球"
            },
            // 计算属性是一个方法
            computed:{
                   msgAttr:function(){
                    return this.msg.replace(",","、");
                   }
            },
            methods:{
                msgMd:function(){
                    return this.msg.replace(",","、");
                }
            }
        })

声明了一个计算属性  msgAttr。我们提供的函数将用作 replace vm.msgAttr 的