v-if和v-show的区别

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/webxiaoma/article/details/72510461

今天来说一下vue中 v-if 和 v-show 的区别！

一、v-if 和 v-show 在页面都展示为显示隐藏，但是它两有这本质的区别。
例如：<div v-if=""></div>
不同点：

1 . v-if 当值为 true时，显示div ，当值为false时，改元素消失，代码也会消失，相当于将代码删除了，当在为true时，页面会重新渲染div;
而v-show 控制的隐藏出现，只是将css属性设为了display：none 或block;

2.v-if 后还有 v-else 和 v-else-if 条件渲染，这里需要注意的是v-else 必须紧跟 v-if 或v-else-if
例如：

<div v-if="Isshow">
    我出现下面不出现
</div>
<div v-else>
    我出现上面不出现
</div>

new Vue({
   el:"", //挂在元素
   data:{
      Isshow:false
   }

})
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-448c2d19d9.css" rel="stylesheet">
            </div>
								
				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>