Vue.js前端开发实例｜使用v-else依据条件增删元素

Vue.js是一套构建用户界面的渐进式框架，摘用自底向上增量开发的设计，非常轻易与其他库或已有项目整合，在与相关工具和支持库一起使用时，能完美地驱动复杂的单页使用。

本系列所有Vue.js代码基于Vue.js 2.6.11，在IntelliJ IDEA 2019.2.3环境编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”测试成功。所有源代码不需要下载Vue.js的其他文件，在测试或使用时保持网络畅通即可。

下面这个实例演示了使用v-else依据条件增删元素。

01

实例功能

此实例主要通过使用v-if和v-else，实现在DOM中依据条件增删元素(span元素)的效果。当在浏览器中展示页面时，假如不勾选复选框(即v-if="false")，则展示邮箱名登录模块，如图1所示。

■ 图1

假如勾选复选框(即v-if="true")，则展示用户名登录模块，如图2所示。

展开全文

■ 图2

02

实现代码

在上面这段代码中，span v-if='myChecked'表达Vue.js将依据myChecked的值(true或false)，决定在DOM中添加哪一个span元素；假如v-if="true"，则向DOM添加span元素(用户名模块)；假如v-if="false"，则向DOM添加span元素(邮箱名模块)。需要注重的是：v-if 可以配合v-else使用，也可以单独使用；当配合v-else使用时，v-else所在的标签应该紧跟在v-if所在的标签之后，假如中间穿插其他标签，v-else所在的标签将永远不会展示出来。此外，Vue.js有一种尝试复用DOM的机制，假如DOM元素已经存在，将复用DOM的机制，此时可以添加一个key值，即这是唯一的、不能复用的DOM元素。

此实例的源文件是MyCode＼ChapD＼ChapD024.html。

03

源代码下载

关注微信公众号，后台回复要害词 “ Vue.js代码197” 即可获得完全源代码。

* 在测试代码时，必须保持网络畅通。

04

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅 罗斌 编著

定价：99.8元

扫码优惠购书