vue计算属性

72 阅读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(",","、");
                }
            }
        })
    </script>