需求：數(shù)據(jù)msg值為12345闸翅，我們現(xiàn)在需要反向顯示成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給的規(guī)則去向反顯示豆瘫，因為默認只有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規(guī)則反向顯示
    </script>