【Vue3】Vue3中計算屬性computed的用法示例（圖文+代碼）

如圖：

<template>
  <div class="div1"> <b>  計算屬性compute執行個體</b></div>
  <h2>--------------------------------------</h2>
  <div class="div2">
    姓：<input type="text" v-model="r_info.xing">
    <br><br>
    名：<input type="text" v-model="r_info.ming">
    <br><br>
    姓名（對象）：{{ r_info.xm }}
    <br><br>
    姓名（變量）：{{ xingming }}
    <br><br>
    姓名（可修改文本框）： <br><input type="text" v-model="xmGetSet">


  </div>
</template>

<script>
// import { get } from 'http'
import { reactive, computed } from 'vue'

export default {
  name: 'App',
  setup() {

    // reactive對象定義
    let r_info = reactive({
      xing: '張',
      ming: '飛',
      xm: computed(() => { return r_info.xing + ' | ' + r_info.ming })
    })
    // reactive數組定義
    let xingming = computed(() => {
      return r_info.xing + '-' + r_info.ming
    })

    // reactive數組定義
    let xmGetSet = computed({
      get(){
        return r_info.xing + '-' + r_info.ming
      },
      set(value){
        // r_info.xing = 1
        // r_info.ming = 2
      }

    })

    // 傳回定義的資料變量和方法
    return {
      xingming,
      r_info,
      xmGetSet
    }
  }
}
</script>

<style>
.div1 {
  padding-left: 50px;
  text-align: left;
  font-size: 18px;

}

h2 {
  color: rgb(23, 50, 202);
}

.div2 {
  text-align: left;
  padding-left: 50px;



}

h4 {
  height: 20px;
  background-color: rgb(27, 40, 155);


}
</style>