Vue2学习笔记:计算属性（computed）数组对象改变赋值

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

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

    <div id="box">
        {{msg}}
        <hr>
        {{ msg.split('').reverse().join('') }}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'12345'
            }
        });

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

image.png

    <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>

同样的可以达到效果！

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

    <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 = 'abcd');     //当我们修改这个变量的时候他的值也是跟随着我们js规则反向显示
    </script>