vue2.X computed 计算属性

需求：数据msg值为12345，我们现在需要反向显示成54321。

1.在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> 
    <div id="box">
        {{msg}}
        <hr>
        {{ msg.split('').reverse().join('') }}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'12345'
            }
        });
    </script>
</body>
</html>

效果图：

Vue提供computed的方式。例如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> 
    <div id="box">
        {{msg}}
        <hr>
        {{reMsg}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'12345'
            },
            computed:{
                reMsg:function(){
                    return this.msg.split('').reverse().join('')
                }
            }
        });

        console.log(vm.reMsg); 
    </script>
</body>
</html>

效果图：

同样的可以达到效果！

注：

但是这边的reMsg是不能被修改的！！也就是修改的时候他不会按照我们js给的规则去向反显示，因为默认只有getter，我们可以提供一个setter:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> 
    <div id="box">
        {{msg}}
        <hr>
        {{reMsg}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'12345'
            },
            computed:{
                reMsg:{
                    get:function(){
                        return this.msg.split('').reverse().join('')
                    },
                    set:function(value){
                        this.msg = value; //最后修改了msg    
                    }
                }
            }
        });

        console.log(vm.reMsg = 'abcde');     //当我们修改这个变量的时候他的值也是跟随着我们js规则反向显示
    </script>
</body>
</html>

效果图：