Vue入门 Demo9 计算属性的setter和getter

最新推荐文章于 2023-09-08 20:18:03 发布

城南花已开呀

最新推荐文章于 2023-09-08 20:18:03 发布

阅读量127

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_36778310/article/details/104663821

版权

Vue 专栏收录该内容

20 篇文章

订阅专栏

Vue入门 Demo9 计算属性的setter和getter

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>计算属性的setter方法和getter方法</title> 
        <script src="./vue.js"></script>
    </head> 
    <body> 
       <div id="app">  
            {{fullName}}
       </div>

       <script>
           var vm = new Vue({
                el: "#app",
                data: {
                    firstName: "Wen",
                    lastName: "He",
                },
                //方法一
                // computed: {
                //     fullName: function(){
                //         return this.firstName + " " + this.lastName;
                //     }
                // }
                //方法二
                computed:   {
                    fullName: {
                        get: function(){
                            console.log(this.firstName + " " + this.lastName);
                            return this.firstName + " " + this.lastName;
                        },
                        set: function(value){
                            var arr = value.split(" ");
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                            // console.log(value);
                        },
                    }
                }
           })
       </script>
    </body> 
</html>