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

本文链接：https://blog.csdn.net/m0_58849641/article/details/125674668

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只返回结果大多数使用这种方法比较多

2.computed的完整写法

<template>

  <h1>vue3.0</h1>

  姓<input type="text" v-model="personal.surname">

  <br>
  <br>

  名<input type="text" v-model="personal.name">

  <br>
  <br>

  姓名<input type="text" v-model="personal.fullName">

</template>

<script>

import {reactive,computed} from 'vue'

export default {
  
  setup(){
    let personal =reactive({
      surname:'张',
      name:'三'
    })

    personal.fullName=computed({

      get(){
        return personal.surname+'-'+personal.name
      },

      set(value){
        //可以输出看看拿到一个什么值
        console.log('拿到的值',value)
        const nameArr=value.split('-')
        personal.surname=nameArr[0]
        personal.name=nameArr[1]
      }
    })

    return {
      personal
    }
  }
}
</script>

这种方法可以通过修改计算出来的值从而改变原来的值（建议不要经常使用）大多数用的第一种方法用的多