ちょうきょう666

导航

3.起步VUE，监听器，计算属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
        {{age}}
    </div>
    <script>
        var vm=new Vue({
                el:"#app",
            data:{
                firstName:"Dell",
                lastName:"Lee",
                fullName:"Dell Lee",
                age:28
            },//监听器
            watch:{
                firstName: function(){
                    console.log("计算了一次");
                    this.fullName=this.firstName+" "+this.lastName;
                },
                lastName: function(){
                    console.log("计算了一次");
                    this.fullName=this.firstName+" "+this.lastName;
                }
            }
            // //计算属性
            // computed:{
            //     fullName:function(){
            //         console.log("计算了一次");
            //        return  this.firstName+" "+this.lastName
            //     }
            // }


        })

    </script>
</body>
</html>

　　

posted on 2021-02-05 11:44  ちょうきょう666  阅读(48)  评论(0)    收藏  举报