亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【金秋打卡】第13天-vue3.0實現todolist

第一模块

课程名称:vue3.0实现todolist

章节名称:

  • 3-10 介绍计算属性

讲师姓名:五月的夏天

第二模块

课程内容(概述)

1、讲解计算属性是什么?计算属性也是一个变量,只不过是通过计算后得到的

2、讲解计算属性如何使用

第三模块

介绍

vue 中,计算属性 computed 在项目开发过程中使用的还是比较频繁的,使用频率高。在 vue3.0 中,计算属性是如何使用的呢。现归纳下在项目中如何使用计算属性以及使用的场景。

使用

<template>
    <div>
        <p>初始值:{{count}}</p>
        <p>Computed单个值:{{computedCount}}</p>
        <p>Computed返回对象值:{{computedObtCount['100x']}}--{{computedObtCount['1000x']}}</p>
        <p><button @click="acctCount">点我一下</button></p>
    </div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
    name: 'VComputed',
    setup() {
        const count = ref(0)
        const acctCount = () => {
            count.value++
        }
        // 定义计算属性, 必须返回一个值
        const computedCount = computed(() => {
            return count.value * 10
        })
        // 计算多个属性,通过返回对象的方式来实现
        const computedObtCount = computed(() => {
            return {
                '100x': count.value * 100,
                '1000x': count.value * 1000
            }
        })
        return {
            count,
            acctCount,
            computedCount,
            computedObtCount
        }
    }
})
</script>

App.vue引入使用

<VComputed />

效果

图片描述

总结

计算属性和生命周期一样,都是从 vue 中导出引入的。我们把计算属性当成一个函数来使用,直接 return 计算结果即可。

计算属性函数可以多次使用,可以返回一个值,也可以返回一个对象包含多个值。

常见使用场景:sku数量变更计算金额,购物车结算计算金额等

第四模块

学习截图
图片描述
图片描述

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
學生
手記
粉絲
1
獲贊與收藏
0

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消