問題

為西夏等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及西夏網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站制作、西夏網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

bug: You may have an infinite update loop in a component render function 無限循環(huán)

1.需要處理的數(shù)組(在 ** ssq **里)：

bonus_code: ['01', '19', '25', '26', '27', '33', '10']

2.計(jì)算屬性 computed：

ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}

3.v-for 代碼：

<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>

4.最終結(jié)果我想把數(shù)組前6個數(shù)渲染成紅色球，最后一個（也就是第7個）渲染成藍(lán)色。

解答

我已經(jīng)在 SegmentFault上提問，地址：vue計(jì)算屬性computed同時操作一個數(shù)組

我已采納答案，將代碼改成：

ssqRed: function() {
 return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
 return this.ssq.bonus_code.slice(6, 7)
}

問題就在于自己沒搞清楚 splice會對原數(shù)組造成改變。

在尋找解決方案時，朋友少暉教給我一種更好的解決方式，很感謝

即類名判斷

1.如果數(shù)組大小已知，就做一個類名判斷，索引大于多少展示藍(lán)色的類名就行了；

2.處理后的 html代碼：

<em v-for="(item, index) in ssq.bonus_code" :class="['tac','mr5','fl',index>5?'blue-ball':'red-ball']" >{{ item }}</em>

3.增加的代碼：

index>5?'blue-ball':'red-ball'

總結(jié)

以上所述是小編給大家介紹的vue計(jì)算屬性時v-for處理數(shù)組時遇到的一個bug問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

新聞標(biāo)題：vue計(jì)算屬性時v-for處理數(shù)組時遇到的一個bug問題
URL網(wǎng)址：http://chinadenli.net/article8/gpieop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、做網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站營銷、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)