|
在先谈区别前，首先我们都知道他们其实都是vue中的条件渲染，只是他们两种应用场景不同
结论：
- v-if(可以单独使用)，通过控制dom节点的渲染，实现显示与隐藏。表达式为true的时候渲染使用v-if属性的元素，否则使用v-else渲染
- 不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
- v-show（切换css样式中display属性），通过控制dom节点css样式中display，频繁切换css样式来显示与隐藏某个组件时，使用v-show。而如果用v-if会频繁渲染dom树，开销较大，造成资源，影响代码运行效率
接着我们再来具体看一下他们的区别：
- v-show 不支持 v-else
- v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做；直到条件第一次变为真时，才会开始渲染条件块。
- v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。`
- ?v-if对应的是元素的添加或者删除，满足条件添加元素，不满足条件删除当前的元素，使用了v-show的元素对应的是css样式display，满足条件对应的是display中的block?，不满足条件对应的是display中的none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="isLogin">登录成功，欢迎您</div>
<div v-else>请登录</div>
<div>
<button v-if="isLogin" @click="isLogin = false">退出</button>
<button v-else @click="isLogin = true">登录</button>
</div>
<div>
<button v-show="false" @click="isLogin = false">退出</button>
<button v-show="true" @click="isLogin = true">登录</button>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isLogin: false
},
methods: {
findAllCategories() {
console.log('查询所有栏目信息');
}
},
created() {
this.findAllCategories()
}
})
</script>
</body>
</html>
|