在Vue中,v-show指令是一種動態地控制元素是否顯示的方法。在實際開發中,他經常被用來控制一個元素的顯示和隱藏,它有許多應用場景,如:控制header、導航條、搜索欄、提示信息等等。
<!-- 語法: --> <element v-show="condition"></element>
v-show指令綁定的是布爾類型的條件值,如果條件為true,則元素會被顯示,否則會被隱藏。我們可以在Vue中的data里定義一個變量,并在需要控制的元素中綁定這個變量作為條件即可實現控制元素的顯示或隱藏。
<!-- 示例: --> <div v-show="isShow">控制顯示的元素</div> <script> export default({ data(){ return{ isShow: true } } }) </script>
需要注意的是,v-show指令與CSS中的display屬性是對應的,當v-show條件為false時,會把該元素的display屬性設置為none,當條件為true時,會把該元素的display屬性設置為原本的值。
與v-if指令不同的是,v-show指令的元素會一直存在于DOM中,只是不顯示,而v-if指令的元素會在條件不滿足時從DOM中移除,滿足條件時才插入DOM中。
有時候,我們可能要控制多個元素的顯示和隱藏,我們可以將條件值定義在data中,然后在需要控制的元素中使用同一條件。
<!-- 示例: --> <div v-show="isShow">控制顯示的元素1</div> <div v-show="isShow">控制顯示的元素2</div> <div v-show="isShow">控制顯示的元素3</div> <script> export default({ data(){ return{ isShow: true } } }) </script>
總體來說,v-show指令是一個十分方便的Vue指令,可以快速實現元素的顯示和隱藏的功能。
上一篇vue v if數組
下一篇vue vendor是啥