Vue系列——02-03计算属性:computed的getter/setter

160 阅读1分钟

​​​​​本文已参与「新人创作礼」活动,一起开启掘金创作之路。

 computed中的get和set方法:就是说它可以控制一个对象属性的一些特有操作,比如说读写

 通过这种方式,可以在改变计算属性值的同时也改变和计算属性相关联的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性:computed的getter/setter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="box">
        <h1>计算属性:computed的getter/setter</h1>
        <h1>姓名</h1>
        {{Name}}
        <h1></h1>
        {{firstName}}
        <h1></h1>
        {{lastName}}
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                firstName: 'Nan',
                lastName: 'chen',
            },
            computed: {
                Name: {
                    get: function () {
                        return this.firstName + this.lastName
                    },
                    //计算属性一般没有set方法,只读属性,只有get方法,如果传进一个新值value也可以用set去设置值,一般使用get
                    set:function(value){
                        var list = value.split(' ');//split: 把一个字符串分割成字符串数组
                            this.firstName=list[0]
                            this.lastName=list[1]
                    }
                }
            }
        })
    </script>
</body>

</html>

注意:

 1、计算属性一般没有set方法,只读属性,只有get方法,如果传进一个新值value也可以用set去设置值,一般使用get 

2、split: 把一个字符串分割成字符串数组

效果如下: 

\