Vue基础之v-if和v-show的使用和特点(4)
2023-09-27 14:24:42 时间
1、特点:
v-if 的特点:每次都会重新删除或创建元素
v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
2、代码使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- <input type="button" value="toggle" @click="toggle"> --> <input type="button" value="toggle" @click="flag=!flag"> <!-- v-if 的特点:每次都会重新删除或创建元素 --> <!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 --> <!-- v-if 有较高的切换性能消耗 --> <!-- v-show 有较高的初始渲染消耗 --> <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show --> <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if --> <h3 v-if="flag">这是用v-if控制的元素</h3> <h3 v-show="flag">这是用v-show控制的元素</h3> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: { /* toggle() { this.flag = !this.flag } */ } }); </script> </body> </html>
相关文章
- vue.js--基础 数据的双向绑定
- Vue基础入门小demo——记事本
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- 【Python/前端】Django创建ws/websocket接口 并供前端(vue)消费
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- 【可视化】Vue基础
- VUE框架 + Element UI + Node 模拟打印机的 Web 即时打印【100010758】
- vue从入门到进阶:过滤器filters(五)
- vue-router跳转
- vue之基础---组件基础
- vue基础---表单输入绑定
- vue基础---列表渲染
- 【报错系列】安装vue-cli报错 code EEXIST path C:UsersAdministratorAppDataRoamingnpmvue
- 【Vue】Vue2组件传参总结来了(建议收藏)
- vue实战入门基础篇七:从零开始仿门户网站实例-业务介绍及加入我们实现
- Vue-router路由基础总结(二)
- vue基础(五),对todos的操作
- Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)
- vue App项目 首页
- CRMEB 基础 PhpStorm vue 设置
- 简单理解Vue中的nextTick
- Vue基础(干货+代码)
- [Vue-Treeselect Warning] Are you meant to dynamically load options? You need to use "loadOptions" prop.