Vue 计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../JS/vue.min.js">
            
        </script>
    </head>
    <body>
        <div id="app">
            <h1>{{com}}</h1>
            
        </div>
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data:{
                    msg:'hello Vue'
                    
                },
                computed:{
                    com:function(){
                        return this.msg.split(" ").reverse().join('===')
                        
                    }
                    
                }
                
                
            })
        </script>
    </body>
</html>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

Vue 计算属性

推荐阅读更多精彩内容