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

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-23
  • 2019-05-22
猜你喜欢
  • 2021-05-30
  • 2021-11-06
  • 2021-09-13
  • 2021-08-17
  • 2021-11-28
  • 2021-05-22
  • 2022-01-26
相关资源
相似解决方案