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

最新推荐文章于 2025-05-14 23:25:08 发布

原创最新推荐文章于 2025-05-14 23:25:08 发布 · 970 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文是关于Web前端Vue.js开发的笔记，重点探讨了组合API中的计算属性概念，通过实例展示了如何计算商品总价，对于理解和使用Vue.js的计算属性具有指导意义。

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

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>