Vue 3-计算属性的getter,setter

最新推荐文章于 2025-09-11 13:53:16 发布

原创最新推荐文章于 2025-09-11 13:53:16 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文详细探讨Vue 3中计算属性的getter和setter的使用，包括它们的工作原理、如何定义以及在实际应用中的最佳实践。通过实例解析，帮助开发者更好地掌握Vue组件状态管理的这一关键特性。

部署运行你感兴趣的模型镜像

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{fullName}}
        {{age}}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fName: 'Dell',
                lName: 'Lee',
                age: 28
            },
            computed:{
                fullName: {
                    get: function(){
                        return this.fName +" " +this.lName;
                    },
                    set: function(value){
                        var arr =  value.split(' ');
                        this.fName = arr[0];
                        this.lName = arr[1];
                    }
                }
            }
        })
    </script>
</body>

</html>

您可能感兴趣的与本文相关的镜像

Qwen-Image

图片生成

Qwen

Qwen-Image是阿里云通义千问团队于2025年8月发布的亿参数图像生成基础模型，其最大亮点是强大的复杂文本渲染和精确图像编辑能力，能够生成包含多行、段落级中英文文本的高保真图像