大家好,今天是鐵人賽的第17天唷!
今天要說的是條件判斷的部分,v-if、v-show。
v-if:
v-if與v-else切換,會直接開啟、關閉其生命週期,透過按鈕之類的切換v-if與v-else區塊,原本區塊會在原始碼消失,只顯示新區塊。
v-show:
切換狀態原本顯示的區塊如果被替換,會CSS 中的display: none來隱藏區塊。
<template>
<div v-if="v_ifShow">V-if</div>
<div v-show="v_show">V-show</div>
{{ vIfShow }}
{{ vShow }}
</template>
<script>
export default {
data()
{
return
{
vIfShow: true,
vShow: true,
};
},
};
</script>
v-if、v-show判斷邏輯相同,都是控制元素決定是否顯示在畫面上。
以上為今天的文章內容感謝閱讀。