vue3的计算属性

最新推荐文章于 2024-07-18 11:17:10 发布

前端菜鸟--LKX

最新推荐文章于 2024-07-18 11:17:10 发布

阅读量394

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/lkx_20201106/article/details/125510975

版权

vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue3中计算属性的使用，通过一个实例展示了如何创建并更新计算属性的值。文中使用了`reactive`和`computed`函数，详细解释了计算属性的简写形式和完整形式，包括`get`和`set`方法，用于实现双向响应式绑定。

摘要由CSDN通过智能技术生成

<template>
    <div>
        <h1>计算属性</h1>
        <hr>
        <input type="text" v-model="person.firstName"> <br>
        <input type="text" v-model="person.lastName"> <br>
        <input type="text" v-model="person.fullName">
    </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
export default {
    name: "Vue3Study05Setup",
    setup() {
        let person = reactive({
            firstName: "张",
            lastName: "三",
        });
        // 计算属性--简写(计算属性返回的值修改无效=>不是单向响应)
        // person.fullName = computed(()=>{
        //   return person.firstName + '-' + person.lastName
        // })
        // 计算属性--完整(响应)
        person.fullName = computed({
            get() {
                return person.firstName + "-" + person.lastName;
            },
            set(value) {
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
            },
        });
        return {
            person,
        };
    },
};
</script>

<style lang="scss" scoped>
</style>