[JavaScript知识库]vue计算属性的get和set

<template>
    <div>
        
        <div>性别是：{{getsex}}</div>
        <button @click="addarr">添加</button>
        <div>改变name的值 {{getname}}</div>
    </div>
</template>

<script>
    export default {
        name: "newsdetail",
        data(){
            return{
               sex:['男','女'],
                first: 'wang',
                two: 'kun'
            }
        },
        computed: {
            // 每个计算属性都包括一个getter和一个setter
            //在计算属性内填写的函数相当于简写的get
            getsex:function (){
                //计算属性函数中的return不能少
                return this.sex[0]
            },
            getname:{
                get: function () {
                    console.log('调用了fullName的get方法');
                    return this.first + ' ' + this.two;
                },
                //只有当getname中的值改变的时候才能触发set，传值的value是getname改变的值
                set: function (value) {
                    console.log('调用了fullName的set方法',value);
                    const names = value.split(' ');
                    this.first = names[0];
                    this.two= names[1];
                }

            }
        },
        methods:{
            addarr:function (){
                this.getname='jiang ke'
            }
        }
    }
</script>

<style scoped>

</style>