VUE 计算方法

<div id="app">
    <p>初始值:{{name}}</p>
    <p>反转值:{{name.split('').reverse().join('')}}</p>
    <p>函数调用:{{reverseStr()}}</p>
    <p>计算属性get方法:{{ reverse}}</p>
    <p>计算方法get:{{zhang}}</p>

    <button @click="deal()">调用计算属性的setter方法</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            name:'Rose Jack',
            fName:'张',
            lName:'路'
        },
        methods:{
            reverseStr(){
                return this.name.split('').reverse().join('')
            },
            deal(){
                this.zhang = 'Token Lily'; //调用zhang的setter方法
            }
        },
        //计算选项
        computed:{
            // get方法
            reverse(){
                return this.name.split('').reverse().join('')
            },
            // zhang(){
            //     return this.fName + '' + this.lName
            // }
            zhang:{
                get(){
                    return this.fName + '' + this.lName

                },
                set(str){
                    let nameArr = str.split(' ');
                    this.fName = nameArr[0];
                    this.lName = nameArr[1];
                }
            }
        }
    })
</script>