vue---computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>
<body>
    <div id = "app">
        姓:<input type="text" v-model="firstName">
        名:<input type="text" v-model="lastName">
        <p>{{name()}} 这是methods方法</p>
        <p>{{fullname}} 这是computed</p>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                firstName:"",
                lastName:""
            },
            methods:{
                name(){
                    return this.firstName +this.lastName
                }
            },
            computed:{
                fullname:{
                    get:function(){
                        return this.firstName + this.lastName
                    },
                }
            }
        })
    </script>
</body>
</html>

  

posted @ 2019-04-14 19:38  杜帅夫人  阅读(133)  评论(0编辑  收藏  举报