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>
