vue笔记9.13

v-bind:属性名='值' 绑定属性的

v-show=""  控制元素的显示和隐藏  使用display:none隐藏

v-if    visibility:hidden;

v-else

v-else-if


                                    v-bind.html


浏览器打开


vue引入图片(点击图片可以切换图片)

v-bind练习.html


浏览器打开


点击下面数字切换图片

v-show.html(元素的显示与隐藏)


浏览器打开


点击按钮可以显示或隐藏

v-if与v-show效果相似

都是显示与隐藏元素

v-if使用 visibility:hidden; 隐藏

v-show使用 display:none 隐藏

二者的区别:display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;

网速相同的情况下v-if使用的visibility:hidden; 较快

v-if.html


浏览器打开


按F5刷新可以更换内容

你可能感兴趣的:(vue笔记9.13)