多個v if判斷渲染

2021-10-11 19:51:11 字數 1492 閱讀 6036

今天碰見後端反介面,將a,b,c三種type一同反給前端,需前端判斷字段是否有值,有值則顯示字段,無值則不顯示字段。

一共三十多個字段,可能會寫到**,就採用了這種方法:

data中:

rightshowlist:

, filters:

["industrialresourcesid"

,"serviceevaluationid"

,"enter_id"

,"technicalfeld"

,"userid"

,"serviceprice"

,"industrial_resources_type"

,"columncode"

,"evaluationstatus"

,"status"

],

請求中:

.

then

((res)

=>);

}}}}

);

translation方法

translation

(key)

}

渲染:

"100px"

>

:label=

"translation(item.label)"

v-for=

"item in rightshowlist"

:key=

"item.index"

>

v-if="

item.label ==

'create_time'

|| item.label ==

'evaluationtime'

|| item.label ==

'submit_time'

">

}<

/span

>

else

>

}<

/span>

"item.label == 'product_price' || item.label == 'service_price'"

>

元<

/span

>

v-show="

item.label ==

'browse_contact_total'

|| item.label ==

'browse_link_total'

">

次<

/span

>

<

/el-form-item>

<

/el-form>

總結:這個頁面操作了太多次v-if,我都於心不忍,再找更好的解決方法吧。

收穫:練習了for…in,includes,switch,v-for等。

心靈雞湯:繼續提高**效率

條件渲染 v if

v if 是否渲染當前元素 v else v else if v show 與 v if 類似,只是元素始終會被渲染並保留在 dom 中,只是簡單切換元素的 css 屬性 display 來顯示或隱藏 doctype html en utf 8 viewport content width devi...

vue中v if條件渲染

1.判斷後台返回的值是檢測中止 或出具報告的時候 讓更改狀態按鈕消失 已發樣等待收樣 支付完成等待發樣 出現取消專案 html部分 v for yong,index in yonghu key index class person box class person one span div clas...

v if渲染問題 (未完待續)

在專案中,調介面的時候,獲取資料總是報錯 vue warn error in mounted hook typeerror cannot read property children of undefined 貼上部分 0 ref popover placement bottom width 560...