vue3.0学习笔记 (computed计算属性)

最新推荐文章于 2025-03-28 17:32:38 发布

许你满眼星辰

最新推荐文章于 2025-03-28 17:32:38 发布

阅读量745

点赞数 2

文章标签： vue3.0

本文链接：https://blog.youkuaiyun.com/m0_58849641/article/details/125674668

版权

本文是关于Vue3.0中computed计算属性的学习笔记，主要介绍了两种使用方式：一种是仅返回结果的常见用法，另一种是允许修改计算值的完整写法，但不建议频繁使用后者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue3.0中computed计算属性

<template>

  <h1>vue3.0</h1>

  数字一<input type="text" v-model="numList.firstNum">

  <br>
  <br>

  数字二<input type="text" v-model="numList.lastNum">

  <br>
  <br>

  总数<h3>{
  {numList.lastNum}}</h3>

</template>


<script>
//从vue引入reactive  computed属性
import {reactive,computed} from 'vue'

export default {
  name: 'App',

  setup(){
    let numList =reactive({
      firstNum:20,
      lastNum:10
    })
    
    //返回结果
    numList.totalNUm=computed(()=>{
      return Number(numList.firstNum)+Number(numList.lastNum)
    })

    //最后return出去
    return {
      numList
    }
  }
}
</script>

注意:此处用的computed只返回结果大多数使用这种方法比较多