目录
v-show:
需求:
v-if
区别与v-show:
v-if和v-show的选择:
v-else-if和v-else
联合使用:
v-show:
部分代码如图:
<body><div id="root"><div ><h1>n的值为{{n}}</h1></div></div>
</body>
<script>new Vue({el:"#root",data:{n:"嘿嘿"}});
</script>
页面:
需求:
现在要隐藏这行文字,有很多中方法,此时在这里只需要加一个属性:
<div v-show="false"><h1>n的值为{{n}}</h1></div>
说明:
1.v-show里面的值为false文字隐藏,true文字显示。
2.当然它属性不只可以为true或false也可以是表达式,但也会根据ture和false判断,例如:
<div v-show="x===1"><h1>n的值为{{n}}</h1></div>
v-if
说明:在使用上,和v-show一样,两者有一定区别
区别与v-show:
使用v-show检查后台时,发现结构并没有被破坏和隐藏,只是在页面上显示时隐藏了
可以看到浏览器给他加了一个display:none的样式将其隐藏,
v-if则不同:
可以看到它直接隐藏了变成了注释。
v-if和v-show的选择:
1.如果你页面上切换频繁就用v-show,因为v-if不断在结构上增删对效率有很大的影响
v-else-if和v-else
这种类似于流程控制if(){}elseif{}else{}依次判断
联合使用:
例如:部分代码如下。
<div v-if="n===1">显示文字1</div><!-- 上面成立下面不在进行 --><div v-else-if="n===2">显示文字2</div><div v-else-if ="n===3">显示文字3</div><!-- 最后一个不需要条件 --><div v-else>显示文字4</div>
当n值为1,2,3,时《显示文字4》被隐藏,
当n值为除以上三个其他值时,《显示文字4》出现,其他三个隐藏。