<template>
  <h3>计算属性的应用</h3>
  <div>
    <p>数组元素为：{{ arrayNumber }}</p>
    <p>数组中最大数为：{{ maxNumber }}</p>
    <!-- <p>数组中最大数为：{{maxNumber}}</p> -->
    <p>
      <span>方法：数组中最小数为：{{ min }}</span
      ><button v-on:click="findMinNumber()">求最小值</button>
    </p>
    <p>函数：数组中最小数为：{{ minNumber() }}</p>
    <!-- <p>函数：数组中最小数为：{{minNumber()}}</p> -->
    <p>原来message:{{ message }}</p>
    <p>函数处理后：{{ message.split(" ").reverse() }}</p>
  </div>
</template>
<script setup lang='ts'>
import { log } from "console";
import { computed, ref } from "vue";
const arrayNumber = ref([3000, -2000, 1308, 278, 225, 556, 1110]);
const min = ref(0);
const message = ref("The Progressive JavaScript Framework");
const maxNumber = computed(() => {
  console.log("maxNumber");
  console.log(arrayNumber);
  return Math.max(...arrayNumber.value);
});
const minNumber = () => {
  console.log("minNumber");
  return Math.min(...arrayNumber.value);
};
const findMinNumber = () => {
  console.log("findMinNumber");
  min.value = Math.min(...arrayNumber.value);
};
</script>
<style scoped>
</style>