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

關于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題

 更新時間:2018年03月26日 09:53:34   作者:jmin_coming  
v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點

1.官網概念描述

v-if 是'真正的'條件渲染,因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當地被銷毀和重建.

v-if 也是惰性的,如果在初始渲染時條件為假,那么什么都不做- - 直到條件第一次為真的時候才會開始渲染條件塊,相比之下,v-show就簡單得多- - 不管初始條件是什么,元素總會被渲染,并且只是簡單的基于css進行切換.

一般來說,v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點.

2.實踐結果

摘錄: 如果用v-if的話,整個dom結構壓根就不會出現(xiàn)在頁面上,如果是用v-show的話,要視后面的條件來定,如果是true,則顯示,如果為false,則加上style=”display:none”. 所以呢,如果是組件之類的大塊頭,個人覺得用v-if更好一些,如果是一些暫時性隱藏,一會要顯示的,還是v-show更方便。對于v-style和v-show來比較,v-show相當于是v-style=”display:none”v-style=”display:block”的快捷方式。

1. v-show不起作用問題

最近在用vue_element-ui開發(fā)多頁面應用,其中遇到v-show不起作用問題.

a.問題描述,如下圖(預想達到的效果),其中表格數據是動態(tài)變化的,包括標題也會根據后臺數據發(fā)生改變,如果后臺返回的標題為空,那么就不顯示該列的內容.反之則顯示該列的所有數據.

部分代碼如下:

執(zhí)行上圖出現(xiàn)的效果圖如下:

那么就會出現(xiàn)上圖的效果,也就是v-show沒能隱藏標題值為null的那列數據

b.解決方法:

將v-show改為v-if即可實現(xiàn)圖一中的效果.

c.總結(個人見解):

由于el-table-column會生成多行標簽元素,根據v-show是不支持template語法的,推斷出v-show不能顯示隱藏多個元素?不知是否

可以這樣理解,望大神告知!所以這種情況下只能用v-if來實現(xiàn).

另外補充,在渲染多個元素時候可以把一個<template>元素作為包裝元素,并在上面使用v-if進行條件判斷,最終的渲染并不會包含這個元素.同時,v-show不支持<template>語法.

總結

以上所述是小編給大家介紹的關于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • vue3自己封裝面包屑功能組件的幾種方式

    vue3自己封裝面包屑功能組件的幾種方式

    網站中我們經??吹接袀€導航路徑,可以直觀地顯示當前頁面的路徑,并快速返回之前的任意頁面,這是一個非常實用的功能,也是在Web前端必備的導航UI之一,這篇文章主要給大家介紹了關于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下
    2021-09-09
  • 基于Vue實例生命周期(全面解析)

    基于Vue實例生命周期(全面解析)

    下面小編就為大家?guī)硪黄赩ue實例生命周期(全面解析)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • django中使用vue.js的要點總結

    django中使用vue.js的要點總結

    在本篇文章里小編給各位整理了關于django中使用vue.js需要注意的地方以及相關知識點,需要的朋友們跟著學習參考下。
    2019-07-07
  • vue多級多選菜單組件開發(fā)

    vue多級多選菜單組件開發(fā)

    這篇文章主要為大家分享了vue多級多選菜單組件開發(fā)案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • WebStorm無法正確識別Vue3組合式API的解決方案

    WebStorm無法正確識別Vue3組合式API的解決方案

    這篇文章主要介紹了WebStorm無法正確識別Vue3組合式API的解決方案,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下
    2021-02-02
  • vue實現(xiàn)商品加減計算總價的實例代碼

    vue實現(xiàn)商品加減計算總價的實例代碼

    這篇文章主要介紹了vue實現(xiàn)商品加減計算總價的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • vue生命周期和react生命周期對比【推薦】

    vue生命周期和react生命周期對比【推薦】

    本文通過實例代碼給大家介紹了vue生命周期和react生命周期對比 ,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • Vue2?中的數據劫持簡寫示例

    Vue2?中的數據劫持簡寫示例

    這篇文章主要為大家介紹了Vue2?中的數據劫持簡寫示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • 詳解vite2.0配置學習(typescript版本)

    詳解vite2.0配置學習(typescript版本)

    這篇文章主要介紹了詳解vite2.0配置學習(typescript版本),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-02-02
  • vite多頁面配置項目實戰(zhàn)

    vite多頁面配置項目實戰(zhàn)

    vite官方文檔中有關于多頁面應用模式如果配置的說明,下面這篇文章主要給大家介紹了關于vite多頁面配置的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-04-04

最新評論