Vue官网教程-计算属性和监听器

<div id="app">
        
        <p>原来:{{message}}</p>
        <p>逆转:{{reverseMessage}}</p>

        

    </div>


    <script>
        
        var vm = new Vue({
            el:‘#app‘,
            data:{
                message:‘Hello‘
            },
            computed:{
                reverseMessage:function(){
                    return this.message.split(‘‘).reverse().join(‘‘);
                }

            }
        });

    </script>

<div id="app">
        
        <p>原来:{{message}}</p>
        <p>逆转:{{reverseMessageFunction()}}</p>
        <p>没有依赖的元素:{{test}}</p>

        

    </div>


    <script>
        
        var vm = new Vue({
            el:‘#app‘,
            data:{
                message:‘Hello‘,
                test:‘test‘
            },
            methods:{
                reverseMessageFunction:function(){
                    console.log(‘调用了reverseMessageFunction‘);
                    return this.message.split(‘‘).reverse().join(‘‘);
                }
            },
            computed:{
                reverseMessage:function(){
                    console.log(‘调用了reverseMessage‘);
                    return this.message.split(‘‘).reverse().join(‘‘);
                }

            }
        });

    </script>

<div id="app">
        
        <p>{{fullName}}</p>

        

    </div>


    <script>
        
        var vm = new Vue({
            el:‘#app‘,
            data:{
                firstName:‘Foo‘,
                lastName:‘Bar‘,
                fullName:‘Foo Bar‘
            },
            watch:{
                // 监听的data中的某个值
                //function是对应的回调函数 val是变化后的值
                firstName:function(val){
                    this.fullName = val + ‘ ‘+this.lastName;
                },
                lastName:function(val){
                    this.fullName = this.firstName+ ‘ ‘+val;
                }

            }
        });

    </script>

<div id="app">
        
        <p>{{fullName}}</p>
        <p>{{test}}</p>

        

    </div>


    <script>
        
        var vm = new Vue({
            el:‘#app‘,
            data:{
                firstName:‘Foo‘,
                lastName:‘Bar‘,
                test:‘test‘
            },
            computed:{
                fullName:{

                    get:function(){
                        console.log(‘计算属性函数‘);
                        return this.firstName+‘ ‘+this.lastName;
                    },

                    set:function(newValue){

                        // 获取到的新值，要更改依赖值才会触发重新计算
                        var name = newValue.split(‘ ‘);
                        this.firstName = name[0];
                        this.lastName = name[1];
                    }

                }
            }
        });

    </script>