[JavaScript知识库]Web前端vue必做笔记之一：组合api-计算属性

Web前端vue必做笔记之一：组合api-计算属性

<template>
     <h1>{{number}}</h1>
</template>
<script>
  //先把computed引入出来
   import {computed} from 'vue'
export default {
    setup(){
        //计算
         const number = computed(()=>{
             return 100
         })
         
         return {
             number
         }
    }
}
</script>

在这里举个例子，计算商品的总价

<template>
     <h1>苹果 0.5元一斤</h1>
     <!-- 通过计数器来添加苹果的数量或减少苹果的数量 来计算苹果的总价-->
     <button @click="decrease">-</button>
      <spn>{{number}}</spn>
      <button @click="increase">+</button>
      <h2>总价：{{totalPrice}}</h2>
</template>
<script>
   import {ref,computed} from 'vue'
export default {
    setup(){
         const number =ref(0)
         
         function increase(){
             number.value++
         }
         function decrease(){
            number.value--
         }

         const totalPrice = computed(() =>{
              return number.value * 0.5;
         })

         return {
             number,
             increase,
             decrease,
             totalPrice
         }
    }
}
</script>