Vue学习(四):条件渲染
2023-09-27 14:24:12 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <!--v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销--> <!--如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好--> <div id="example1"> <h2 v-if="type === 'A'">A</h2> <h2 v-else-if="type === 'B'">B</h2> <h2 v-else-if="type === 'C'">C</h2> <h2 v-else>Not A/B/C</h2> </div> <div id="example2" v-show="ok">Hello Vue.</div> <script type="text/javascript" src="vue.min.js"></script> <script> let vm1 = new Vue({ el: '#example1', data: { type: 'B' } }); let vm2 = new Vue({ el: '#example2', data: { ok: true } }) </script> </body> </html>
相关文章
- (尚033)Vue_案例_slot(组件间的通信4:slot)
- vue.js--基础事件定义,获取数据,执行方法传值
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- Blazor和Vue对比学习:祖孙传值,联级和注入
- vue v-for You may have an infinite update loop in a component render function
- Vue - 项目(未编译)上传到 Gitee / GitHub 时不上传 dist 文件夹/看不到(解决方案)
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- jsp页面用html引入vue.js注意问题
- 用【mysql,vue,node】制作一个前后端分离小项目
- vue-router实现SPA购物APP基本功能
- Vue面试题总结(1)
- Vue知识点总结(8)——filter过滤器(超级详细)
- vue学习笔记一:环境搭建
- 基于springboot+vue的“体质测试数据分析及可视化设计”程序设计实现【毕业论文,源码】
- vue的组件(先学习其他的ES6知识,之后再看这个) (未完)
- vue-cli3配置多页面入口
- 手把手学习Vue3.0:如何利用Vue-CLI4.5.1脚手架创建Vue3.0工程
- vue组件间高级通信
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Django+Vue项目学习第七篇:利用nginx解决跨域问题
- Django+Vue项目学习第一篇:django后台搭建
- Vue学习第31天——编程式路由导航5种方法详解及案例练习(与声明式路由导航对比)
- Vue学习第29天——路由的props配置项的详解与案例(对比组件props配置项)
- Vue学习第28天——路由传参(query参数和params参数)详解及案例
- Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习
- vue $set修改数组
- vue(1) 第一个例子
- 使用Vue脚手架(CLI)创建Vue项目并分析项目结构