欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE?組件的計(jì)算屬性詳解

 更新時(shí)間:2022年06月24日 11:41:08   作者:??默默的成長(zhǎng)????  
這篇文章主要介紹了VUE組件的計(jì)算屬性詳解,使用計(jì)算機(jī)屬性還是methods取決于你是否需要緩存,當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí),應(yīng)當(dāng)使用計(jì)算機(jī)屬性,除非你不希望得到緩存,下文來了解具體詳情

前言

  • 今天也是元?dú)鉂M滿的一天,今天整理一下VUE組件的計(jì)算屬性!~~
  • 開始我們的學(xué)習(xí)之旅

計(jì)算屬性

  • 先引用一張圖 來看一下計(jì)算屬性之間的關(guān)聯(lián):

注意: methods和computed里的東西不能重名

  • method:定義方法,調(diào)用方法使用currentTime(),需要帶括號(hào)
  • computed:定義計(jì)算屬性,調(diào)用屬性使用currenTime2,不需要帶括號(hào):this.message是為了能夠讓currentTime2觀察到數(shù)據(jù)變化
  • 如何在方法中的值發(fā)生了變化,則緩存就會(huì)刷新!可以在控制臺(tái)使用vm.message="HelloShit!"
 <div id='app'>
        <audio :src="currentSrc" controls autoplay @ended='handleEnded'></audio>
        <ul>
            <li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id'
                @click='handleClick(item.songSrc,index)'>
                <h2>{{item.id}}-歌名:{{item.name}}</h2>
                <p>{{item.author}}</p>
            </li>
        </ul>
        <button @click='handleNext'>下一首</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const musicData = [{
                id: 1,
                name: '楊宗緯 - 空白格',
                author: '楊宗緯',
                songSrc: '楊宗緯 - 空白格 (Live).mp3'
            },
            {
                id: 2,
                name: '楊宗緯 - 其實(shí)都沒有',
                author: '楊宗緯',
                songSrc: '楊宗緯 - 其實(shí)都沒有.flac'
            },
            {
                id: 3,
                name: '楊宗緯 - 我想要',
                author: '楊宗緯',
                songSrc: '楊宗緯 - 我想要 (Live).flac'
            }
        ];

        new Vue({
            el: '#app',
            data: {
                musicData,
                currentSrc: '楊宗緯 - 空白格 (Live).mp3',
                currentIndex: 0
            },
            methods: {
                handleClick(src, index) {
                    this.currentSrc = src;
                    this.currentIndex = index;
                },
                handleEnded() {
                    // // 下一首的播放
                    // this.currentIndex++;
                    // this.currentSrc = this.musicData[this.currentIndex].songSrc;
                    this.handleNext();
                },
                handleNext() {
                    this.currentIndex++;
                    if (this.currentIndex === this.musicData.length) {
                        this.currentIndex = 0;
                    }
                    this.currentSrc = this.musicData[this.currentIndex].songSrc
                }
            }
        })
    </script>
  • 在methods里定義了一個(gè)方法實(shí)現(xiàn)了和計(jì)算機(jī)屬性相同的效果,甚至該方法還可以接受參數(shù),使用起來更靈活,既然使用methods就可以實(shí)現(xiàn),那為什么還需要計(jì)算機(jī)屬性呢?原因就是計(jì)算機(jī)屬性是基于它的依賴緩存的。一個(gè)計(jì)算機(jī)屬性所依賴的數(shù)據(jù)發(fā)生變化時(shí),它才會(huì)重新賦值,所以text只要不改變,計(jì)算機(jī)屬性也就不會(huì)更新
  • 這里的Date.now()不是響應(yīng)式依賴,所以計(jì)算機(jī)屬性now不會(huì)更新。但是methods則不同,只要重新渲染,它就會(huì)被調(diào)用,因此函數(shù)也會(huì)被執(zhí)行。

總結(jié)

使用計(jì)算機(jī)屬性還是methods取決于你是否需要緩存,當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí),應(yīng)當(dāng)使用計(jì)算機(jī)屬性,除非你不希望得到緩存。

到此這篇關(guān)于VUE 組件的計(jì)算屬性詳解的文章就介紹到這了,更多相關(guān)VUE 組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue項(xiàng)目Luckysheet的使用

    vue項(xiàng)目Luckysheet的使用

    這篇文章主要介紹了vue項(xiàng)目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包,所以只能使用CDN引入依賴,在vue項(xiàng)目的public/index.html文件里引入即可,本文通過示例代碼給大家詳細(xì)介紹,需要的朋友可以參考下
    2022-08-08
  • 基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題

    基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題

    這篇文章主要介紹了基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題,需要的朋友可以參考下
    2018-05-05
  • Vue3中插槽(slot)用法匯總(推薦)

    Vue3中插槽(slot)用法匯總(推薦)

    這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • 適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解

    適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解

    這篇文章主要介紹了適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • vue3+elementPlus?table中國(guó)添加輸入框并提交校驗(yàn)

    vue3+elementPlus?table中國(guó)添加輸入框并提交校驗(yàn)

    這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗(yàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08
  • vue.js基于ElementUI封裝了CRUD的彈框組件

    vue.js基于ElementUI封裝了CRUD的彈框組件

    這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件,問咋會(huì)給你圍繞主題展開詳細(xì)的內(nèi)容介紹,感興趣的小伙伴可以參考一下
    2022-07-07
  • vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式

    vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式

    這篇文章主要介紹了vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • el-table?選中行與復(fù)選框相互聯(lián)動(dòng)的實(shí)現(xiàn)步驟

    el-table?選中行與復(fù)選框相互聯(lián)動(dòng)的實(shí)現(xiàn)步驟

    這篇文章主要介紹了el-table?選中行與復(fù)選框相互聯(lián)動(dòng),分為兩步,第一步點(diǎn)擊行時(shí)觸發(fā)復(fù)選框的選擇或取消,第二步點(diǎn)擊復(fù)選框時(shí)觸發(fā)相應(yīng)行的變化,本文通過實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2022-10-10
  • 詳解Vue中Computed與watch的用法與區(qū)別

    詳解Vue中Computed與watch的用法與區(qū)別

    這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別,文中通過示例為大家進(jìn)行了詳細(xì)講解,對(duì)Vue感興趣的同學(xué),可以學(xué)習(xí)一下
    2022-04-04
  • Vue中的事件處理詳情

    Vue中的事件處理詳情

    這篇文章主要介紹了Vue中的事件處理詳情,文章通過給按鈕綁定一個(gè)?click?事件展開詳細(xì)內(nèi)容介紹,需要的小伙伴可以參考一下
    2022-05-05

最新評(píng)論