脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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使用Vuex之mapState与mapGetters详解

    Vue3使用Vuex之mapState与mapGetters详解

    这篇文章主要为大家介绍了Vue3使用Vuex之mapState与mapGetters详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • Vue全局拦截所有请求并在请求头中添加token方式

    Vue全局拦截所有请求并在请求头中添加token方式

    这篇文章主要介绍了Vue全局拦截所有请求并在请求头中添加token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue3 使用setup语法糖实现分类管理功能

    vue3 使用setup语法糖实现分类管理功能

    这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单，需要的朋友可以参考下
    2022-08-08
  • ant design Vue 纯前端实现分页问题

    ant design Vue 纯前端实现分页问题

    这篇文章主要介绍了ant design Vue 纯前端实现分页问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue中如何避免props验证失败问题

    Vue中如何避免props验证失败问题

    本文将探讨 props 验证失败的常见原因,并提供解决方法,帮助开发者在 Vue 组件开发中避免这些问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • vue实现三级联动动态菜单

    vue实现三级联动动态菜单

    这篇文章主要为大家详细介绍了vue实现三级联动动态菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue之组件和iframe页面的相互传参问题

    vue之组件和iframe页面的相互传参问题

    这篇文章主要介绍了vue之组件和iframe页面的相互传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-06-06
  • Vue.native如何将原生事件绑定到组件

    Vue.native如何将原生事件绑定到组件

    这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 3 的＜Teleport＞功能与用法详解

    Vue 3 的＜Teleport＞功能与用法详解

    <Teleport> 是 Vue 3 的一个内置组件,允许将组件的内容渲染到 DOM 中的任意位置,而不改变其逻辑结构,这篇文章主要介绍了Vue 3 的＜Teleport＞功能与用法详解,需要的朋友可以参考下
    2025-04-04
  • vue使用ECharts实现折线图和饼图

    vue使用ECharts实现折线图和饼图

    这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论