4.6 vue指令之v-if和v-show

v-if和v-show

这两个我们需要知道:
1.用来干什么？语法
2.两者之间有什么区别

这两个指令都能实现使用这指令的该元素的显示和隐藏

• 语法：v-if='bool值/表达式' v-show='bool值/表达式'

• 使用细节

  • v-if:是通过是否创建元素来决定元素是显示还是隐藏
  • v-show是通过样式的方式来决定元素是显示还是隐藏

• 使用场景

  • 如果一个元素频繁的显示和隐藏，那么就使用v-show--可以节省创建元素的过程
  • 如果元素的显示涉及到异步操作，如分页,只在第一页使用,就使用v-if--可以避免无用的数据占据内存空间

• 代码示例

 <template>
    <div class="show">
        <button @click="isShow = !isShow">单击切换显示隐藏</button>
        <p>这个文件主要讲解v-if和v-show实现元素的显示隐藏</p>
        <p>对于我们而言重要是掌握这两种方式实现显示隐藏的区别</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>