v-if和v-show

這兩個我們需要知道:
1.用來干什么？語法
2.兩者之間有什么區(qū)別

這兩個指令都能實現(xiàn)使用這指令的該元素的顯示和隱藏

• 語法：v-if='bool值/表達式' v-show='bool值/表達式'

• 使用細節(jié)

  • v-if:是通過是否創(chuàng)建元素來決定元素是顯示還是隱藏
  • v-show是通過樣式的方式來決定元素是顯示還是隱藏

• 使用場景

  • 如果一個元素頻繁的顯示和隱藏，那么就使用v-show--可以節(jié)省創(chuàng)建元素的過程
  • 如果元素的顯示涉及到異步操作，如分頁,只在第一頁使用,就使用v-if--可以避免無用的數(shù)據(jù)占據(jù)內存空間

• 代碼示例

 <template>
    <div class="show">
        <button @click="isShow = !isShow">單擊切換顯示隱藏</button>
        <p>這個文件主要講解v-if和v-show實現(xiàn)元素的顯示隱藏</p>
        <p>對于我們而言重要是掌握這兩種方式實現(xiàn)顯示隱藏的區(qū)別</p>
        <p v-if='isShow'>被控制的內容</p>
        <p v-show='isShow'>被控制的內容</p>
    </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>
<style lang="less" scoped>

</style>