脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3的computed用法

Vue3的computed用法及说明

 更新时间：2025年12月17日 09:13:02   作者：小储今天暴富了  
文章介绍了如何在Vue.js中使用计算属性,包括只计算不修改值的情况和可以修改的计算属性,对于只计算不修改值的情况,可以直接使用computed方法,对于需要修改的计算属性,计算属性可以传入一个对象,包含get和set函数

1.针对只计算不修改值的场景

（1）一个计算属性

<template>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num3" />

</template>
<script lang="ts">
  import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
  export default defineComponent({
     setup(){
        let num1=ref(1)
        let num2=ref(3)
        const num3=computed(()=>{
           return Number(num1.value)+Number(num2.value)
        })
         return{
           num1,
           num2,
           num3
         }
     }
  })
</script>

上述的例子只是单纯的计算两个数的和，可以直接引入computed方法在方法里进行计算

（2）多个计算属性 

<template>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num3" />
    <hr>
    <input type="text" v-model="num1" />
    -
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num4" />

</template>
<script lang="ts">
  import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
  export default defineComponent({
     setup(){
        let num1=ref(3)
        let num2=ref(1)
        const num3=computed(()=>{
           return Number(num1.value)+Number(num2.value)
        })
        const num4=computed(()=>{
           return Number(num1.value)-Number(num2.value)
        })
         return{
           num1,
           num2,
           num3,
           num4
         }
     }
  })
</script>

计算属性不是只可以写一个的，可以写任意多个计算属性，代码如上所示，效果如下 

2.可以修改的计算属性

问题：如果我们直接修改计算属性的值会报错误

原因：如果传递给 computed 的是一个函数，那么这就是一个 getter 函数，我们只能获取它的值，而不能直接修改它。

如果需要修改计算属性的值，计算属性传入一个对象， 包含get 和 set 函数， 就能实现创建一个可以修改的计算属性。

代码如下：

<template>
    <input type="text" v-model="num1" />
    +
    <input type="text" v-model="num2" />
    =
    <input type="text" v-model="num3" />
    <hr>
   <button @click="updata">修改计算属性的值</button>

</template>
<script lang="ts">
  import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
  export default defineComponent({
     setup(){
        let num1=ref(3)
        let num2=ref(1)
         const num3=computed({
             get(){
                return Number(num1.value)+Number(num2.value)
             },
             set(value :number){
                 num2.value=value+1
             }
         })
         const updata=()=>{
             num3.value=10
         }
         return{
           num1,
           num2,
           num3,
           updata
         }
     }
  })
</script>

效果如下：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3 Vant组件库使用过程中的避坑点

    Vue3 Vant组件库使用过程中的避坑点

    本片文章主要写了，Vue3开发时运用Vant UI库的一些避坑点。让有问题的小伙伴可以快速了解是为什么。也是给自己做一个记录
    2023-04-04
  • Vue常见报错整理大全(从此报错不害怕)

    Vue常见报错整理大全(从此报错不害怕)

    写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue3初始化如何调用函数

    Vue3初始化如何调用函数

    这篇文章主要介绍了Vue3初始化如何调用函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • Vue生命周期示例详解

    Vue生命周期示例详解

    这篇文章主要为大家详细介绍了Vue生命周期的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 基于vue封装一个带眼睛的密码子组件

    基于vue封装一个带眼睛的密码子组件

    这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • vue3组件库Shake抖动组件搭建过程详解

    vue3组件库Shake抖动组件搭建过程详解

    这篇文章主要为大家介绍了vue3组件库Shake抖动组件搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • vue生成二维码QR Code的简单实现方法示例

    vue生成二维码QR Code的简单实现方法示例

    这篇文章主要为大家介绍了vue生成二维码QR Code的实现示例详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-04-04
  • Vue.js中NaiveUI组件文字渐变的实现

    Vue.js中NaiveUI组件文字渐变的实现

    这篇文章主要介绍了Vue.js中NaiveUI组件文字渐变的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-07-07
  • Vue侦测相关api的实现方法

    Vue侦测相关api的实现方法

    这篇文章主要介绍了Vue侦测相关api，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue项目中使用bpmn-自定义platter的示例代码

    vue项目中使用bpmn-自定义platter的示例代码

    这篇文章主要介绍了vue项目中使用bpmn-自定义platter的实例代码，本文通过代码截图相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05

最新评论