2. 程式人生 > >15.VUE學習之-v-show的使用與v-if的差異對比

15.VUE學習之-v-show的使用與v-if的差異對比

阿新 • • 發佈：2019-01-07

v-show的使用與v-if的差異對比

相同點:

都可以達到隱藏和顯示的效果.

不同點:

  1. v-show 會用display:none 來隱藏元素節點,推薦使用這種方式
  2. v-if 會移除節點,可以配合v-else-if和v-else 使用
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue</title>
    <link rel="stylesheet" href="">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="vue">
        <h2 v-if="status">顯示一</h2>
        <h3 v-else>顯示二</h3>
        <span v-show="status">顯示三</span>
        <br>

        <input v-model="status" type="checkbox">

    </div>

</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#vue",
        data:{
            status:true,
        }
    });

</script>
</html>

效果:

相關推薦

15.VUE學習之-v-show的使用與v-if的差異對比

v-show的使用與v-if的差異對比 相同點: 都可以達到隱藏和顯示的效果. 不同點: v-show 會用display:none 來隱藏元素節點,推薦使用這種方式 v-if 會移除節點,可以配合v-else-if和v-else 使用 <!DOCTYPE html> &l

vue之v-show與v-if的區別

v-if 是動態地向DOM樹內新增或者刪除DOM元素； v-show 是通過設定DOM元素的display樣式屬性控制顯隱； 所以這裡就牽扯到我今天要說的一個問題了：我們根據使用者不同的許可權，會對應地顯示不同的頁面，比如說管理員身份，具有檢視、編輯和刪除某一條資料的許可權，

vue中v-show與v-if的區別

marked 排版 事件監聽器 復用 中一 改變 緩存 模板 進行 之前在做項目的過程中，因為有用到element-ui組件用到了v-if進行排版渲染，可能是因為v-if，會把編譯緩存起來，所以切換的過程中一直會有復用的形式，導致樣式怎麽也不對，之後換成v-show就好了。

1.4 Vue v-if,v-show與v-for指令

v-if,v-show與v-for <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if,v-show與v-for指令</title>

v-show 與 v-if區別

初始 需要 開始 切換狀態 不同的 一般來說 過程 條件 數據綁定 關於條件渲染 所謂條件渲染，就是根據不同的條件，使用不同的模板來生成 html。 在 Vue.js 中，使用 v-if 和 v-show 指令來控制條件渲染。 區別 v-show 會在app初始化的時候編譯

15.VUE學習之-表單中使用key唯一令牌解決表單值混亂問題

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <ti

Vue2.5入門——v-if，v-show與v-for指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

Vue學習之v-if與v-show的區別

css屬性 綁定 strong 似的 表達式 他會 根據 als 相對 v-if和v-show具有類似的功能，不過v-if才是真正的條件渲染，他會根據表達式適當的銷毀或重建元素及綁定事件或子組件。若表達式初始值為false，則一開始元素或組件不會渲染，只有當第一次為真時，才

VUE學習之v-show和v-if與angular的ng-show和ng-if

今天接到通知，公司專案從angular改為使用vue ，兩個框架其實各有千秋吧，Angular相對來說體積大一些，是vue的好幾倍，之前我也寫過angular和vue的資料雙向繫結的區別，一個是髒資料檢查機制，一個是資料劫持，採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.def

VUE學習之------v-show v-if

v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上，有更高的初始渲染消耗，適合做頻繁的額切換； v-if是根據後面資料的真假值判斷直接從Dom樹上刪除或重建元素節點，有更高的切換消耗，不適合做頻繁的切換；   <style>

Vue學習之vue中的v-if,v-show,v-for

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

19.VUE學習之- v-for與computed結合功能 篩選例項講解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/di

Vue學習之路7-v-on指令學習之簡單事件綁定

調用 pan spl onerror reset ima 簡單 rip 指令 前言 在JavaScript中任何一個DOM元素都有其自身存在的事件對象，事件對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置和鼠標按鈕的狀態等。事件通常與函數結合使用，函

Vue學習之路8-v-on指令學習簡單事件綁定之屬性

當前 14. export mit 修飾符 第一次 例如 www sco 前言 上一篇文章以v-on指令綁定click事件為例介紹了v-on指令的使用方法，本文介紹一下v-on綁定事件的一些屬性的使用方法。 v-on綁定指令屬性 .stop屬性 阻止單擊事件繼

04.VUE學習之v-text v-html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <ti

16.VUE學習之- v-for指令的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist

14.VUE學習之-v-if v-else-if語法在網站註冊中的實際應用講解

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <ti

vue methods和computed，v-show和v-if

循環 求值 因此 一次 -s value compute 結果 事件監聽 方法（method）和計算屬性（computed）區別 每當觸發重新渲染時，調用方法將總會再次執行函數。 計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。多次

vue v-for與v-if組合使用

scom 優先 org template 宋體 http vue 代碼 https 當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重復運行於每個 v-for 循環中。當你想為僅有的_一些_項渲染節點時，這種優先級的機制會十分有用，如下

Vue 中的動態元件與 v-once 指令

toggle 兩個元件的功能，程式碼如下。 <div id="root"> <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child