vue之计算属性的setter和getter

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>
&lt;script src=&#34;../js/vue.js&#34;&gt;&lt;/script&gt;
&lt;script&gt;
    const app = new Vue({
    el: &#39;#app&#39;,
    data: {
        firstName: &#39;kobe&#39;,
        lastName: &#39;Bryant&#39;
        },
        computed: {
           /*fullName: function () {
                return this.firstName+&#39; &#39;+this.lastName
           }*/
            //计算属性一般没有set方法,只读属性
            fullName: {
               /* set: function (newValue) {
                    // console.log(&#34;------&#34;+newValue);
                    const names = newValue.split(&#39; &#39;);
                    this.firstName = name[0]
                    this.lastName = name[1]
                },*/

                get: function () {
                    return this.firstName+&#39; &#39;+this.lastName
                }
            },

            /*fullName: function () {
                return this.firstName+&#39; &#39;+this.lastName
            }*/

        }
    })
&lt;/script&gt;

</body>
</html>

在这里插入图片描述