vue教程2-03 vue计算属性的使用 computed

vue教程2-03 vue计算属性的使用 computed

computed:{
        b:function(){    //默认调用get
            return 值
        }
    }
    --------------------------
    computed:{
        b:{
            get:
            set:
        }
    }

    * computed里面可以放置一些业务逻辑代码,一定记得return
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        a => {{a}}
        <br>
        b => {{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:{
                    //业务逻辑代码,b的值完全取决于return回来的值
                    get:function(){
                        return this.a+2;//默认调用get
                    },
                    set:function(val){
                        this.a=val;
                    }
                }
            }
        });

        document.onclick=function(){
            vm.b=10;//相当于set函数传入val=10
        };
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6772954.html