Vue3.0—computed函数

最新推荐文章于 2024-10-15 11:06:07 发布

糖醋小排顾。

最新推荐文章于 2024-10-15 11:06:07 发布

阅读量205

点赞数 3

分类专栏： Vue学习文章标签：前端 vue.js javascript Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128865474

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

文章介绍了Vue3.x中computed函数的使用，包括计算属性的简写和完整写法，用于根据其他数据生成衍生数据。在示例中，展示了如何创建一个连接firstName和lastName的fullName计算属性，并支持双向绑定。同时，文章提到了reactive函数用于创建响应式对象。

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

computed函数

- 与Vue2.x中computed配置功能一致

- 写法

```js

  import {computed} from 'vue'
 
  setup(){
     ...
    //计算属性——简写
      letfullName= computed(()=>{
          return person.firstName + '-' + person.lastName
     })
      //计算属性——完整
      letfullName= computed({
          get(){
              return person.firstName + '-' + person.lastName
         },
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
         }
     })
 }

```

<template>
    <h1>一个人的信息</h1>
    姓：<input type="text" v-model="person.firstName">
    <br>
    名：<input type="text" v-model="person.lastName"><br>
    <span>全名：{{ person.fullName }}</span>
    全名：<input type="text" v-model="person.fullName">
</template>
<script>
    import {reactive,computed} from 'vue'
    export default {
        name: 'D-Demo',
        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>