v-if与v-show实例

v-if与v-show都能控制一个元素是否可见。不同的是:v-if在切换时,是将DOM节点删除或新建,而v-show只是对元素进行显示或隐藏。

实例:点击按钮,实现图片的切换,一张图片用v-if, 一张用v-show

切换.gif

具体代码

<!--切换时会删除/新建节点,开销比较大-->
<div class="one" v-if="flag">
    <img :src="one" alt="" width="300">
</div>
<!--只是改变元素的属性,初始化时加载时间较长-->
<div class="two" v-show="!flag">
    <img :src="two" alt="" width="300">
</div>

v-if元素被删除

v-show被隐藏

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林冠宏的技术文章

Golang 编写的图片压缩程序,质量、尺寸压缩,批量、单张压缩

目录:   前序   效果图   简介   全部代码 前序: 接触 golang 不久,一直是边学边做,边总结,深深感到这门语言的魅力,等下要跟大家分享是最近...

79510
来自专栏Python攻城狮

pycharm快捷键及一些常用设置

1. pycharm默认是自动保存的,习惯自己按ctrl + s 的可以进行如下设置:

903
来自专栏Spring相关

Vue中webpack的Style的lang和Scoped属性

修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:

1602
来自专栏九彩拼盘的叨叨叨

前端学习 第3周 第2天

702
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

1673
来自专栏coding

vue.js组件切换

872
来自专栏十月梦想

Vue入门基础之组件插槽(slot)使用

组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,slot就提供了极大的便利!下面看一下slot用法!

1381
来自专栏每日一篇技术文章

weex-27-通用事件

如上示例中定义的单击事件方法tap中,如果不传递参数,即使用默认参数的情况,系统会自动传递如下对象当成方法的参数

1063
来自专栏我爱编程

PyCharm

1644
来自专栏happyJared

IDEA快捷键拆解系列(十五):经验篇

  本文整理了一些博主本人在学习工作中比较常用到的快捷键,有需要的可以参考一下,也欢迎留言补充。

1201

扫码关注云+社区