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

misa2 03-05 4次浏览 0条评论

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

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

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

实例功能

此实例主要通过使用v-else-if，实现在DOM中依据不同条件添加或移除元素(img)的效果。当在浏览器中展示页面时，假如单击“科技新书”单选按钮，则将在下面展示(添加)科技图书的海报，如图1所示。

展开全文

■ 图1

假如单击“社科新书”单选按钮，则将在下面展示(添加)社科图书的海报，如图2所示。单击其他单选按钮将实现类似的功能

■ 图2

实现代码

在上面这段代码中，div v-if="myBook === myBooks［0］"表达假如v-if="true"，则向DOM添加该div元素；假如v-if="false"，则推断div v-else-if="myBook === myBooks［1］"的v-else-if是否为true，假如该v-else-if为true，则向DOM添加该div元素，否则推断div v-else-if="myBook === myBooks［2］"的v-else-if是否为true，以此类推；假如所有的v-if和v-else-if均为false，则向DOM添加div v-else所在的div元素。原则上，可以链式地多次使用v-else-if。

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

源代码下载

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

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

参考图书

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

ISBN：978-7-302-56815-5

罗帅罗斌编著

定价：99.8元

扫码优惠购书

手机主题元素下载

如何使用React创建QR code生成器 4个免费好用的音频转换工具，简单两步转成MP3格式