美文网首页
v-show、v-if、v-bind

v-show、v-if、v-bind

作者: 惊诈猫 | 来源:发表于2018-09-13 07:51 被阅读0次

1.v-show和v-if的区别

v-show/v-if都可以控制元素的显示和隐藏,但是方式不一样,v-show使用的是display:none来控制的,v-if        使用的是visibility:hidden来控制的

2.display:none和visibility:hidden的区别

visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无,即在网页中不占任何的位置。

例如有三个table,将中间的一个table hidden掉,你会发现在那个被hidden的table看不见了,但是,中间              会留有很大的一空白,而这个空白就是这个table没有被隐藏时所占的位置

而none的作用更像是把元素从网页中“去除”(当然不是真的去除,只是效果是如此)

例如有三个table,将中间的一个table none掉,你会发现在剩下的两个table中间不会有任何的空白。就好          像中间的那个table从来不存在过一样

3.v-bind

v-bind绑定属性,v-bind:属性名=‘值’,也可以省略v-bind,直接在属性前面加冒号:, :属性名=‘值’

1.v-show/v-if:控制元素的显示隐藏

2.v-bind:绑定属性

4.案例

显示/隐藏

图片切换

添加/删除水果列表

相关文章

网友评论

      本文标题:v-show、v-if、v-bind

      本文链接:https://www.haomeiwen.com/subject/jkvigftx.html