vue中使用v-if出现闪现然后消失
vue中使用了v-if，内容出现了闪现然后消失
问题及基本代码
目标效果：当访问的路径是need时就隐藏顶部的common组件
具体问题：访问 http://localhost:8080/#/need，每次刷新页面顶部都会闪现一下蓝色的盒子（common.vue）
相关路由：
{path: '/need',name: 'need',component: () => import('../views/need.vue')}
根组件App.vue
<template><div id="app"><common v-if="$route.name !== 'need'"></common><router-view></router-view></div>
</template>
<script>
import common from './components/common.vue'
export default {components: {common: common}
}
</script>
common.vue是一个蓝色的盒子
<template><div class="common"><div style="backgroundColor:green;height200px;">common组件</div></div>
</template>
need.vue组件
<template><div class="father"><h1>这是need组件</h1></div>
</template>
解决思路
访问这个路由的时候,当前路由 route.name===‘name’，所以v-if=“false”;应当不会闪现；组件应该都不会被创建
实际上每次初始化的时候，common组件都会渲染一次；
方案1: 我想先将组件隐藏，让他一开始就不出现;后面再去根据 $route.name判断，应该就好了
<commonclass="hideBox":class="{ showBox: $route.name !== 'need' }"></common>
.hideBox {display: none;
}
.hideBox.showBox {display: block;
}
结果发现不行，还是会闪现；难道时v-if不显示的话会先渲染再隐藏？还是 $route.name !== ‘need’ 这个条件一开始一定时true,然后再变为false
于是我就在app.vue中打印了一下this.$route.name
created() {console.log('created1', this.$route.name) // null},mounted() {console.log('mounted1', this.$route.name) // null},updated() {console.log('updated1', this.$route.name) // need}
结果发现app.vue中created和mountd都没有拿到期待的值
但是我之前也使用过，用$router.name来判断，没出现问题；于是我在need.vue中也添加了一个相同判断，且在这三个声明周期中打印
修改后的need.vue部分代码
<h1>这是need组件</h1><div v-if="$route.name !== 'need'"><div style="height:200px;backgroundColor:red"></div></div>created() {console.log('created2', this.$route.name) // need},mounted() {console.log('mounted2', this.$route.name) // need},updated() {console.log('updated2', this.$route.name) },
结果：刷新时只出现common.vue的闪现，加的测试的红色盒子并没闪现;created和mounted打印出了need
方案2：按需导入
再created之前就能判断它(common组件)不渲染
修改后app.vue的部分代码
<div id="app"><common v-if="$route.name !== 'need'"></common><router-view></router-view></div>components: {common: () => import('./components/common.vue')}
问题解决了，刷新不会闪现
编译的时候就不会导入这个组件了，自然不会渲染（need这个路径）
结论
v-if如果为false的话，确实不会先渲染再消失,false都不会生成对应dom
vue生命周期：父组件created=>父组件mounted=>子组件created=>子组件mounted=>父组件updated
再子组件mounted之前，app根组件是拿不到子组件的name， $route.name为null
vue组件尽量使用按需加载
e都不会生成对应dom
vue生命周期：父组件created=>父组件mounted=>子组件created=>子组件mounted=>父组件updated
再子组件mounted之前，app根组件是拿不到子组件的name， $route.name为null
vue组件尽量使用按需加载
vue中使用v-if出现闪现然后消失相关推荐
- Vue中提示框慢慢显示和慢慢消失方法
Vue中提示框慢慢显示和慢慢消失方法 Vue提供了一个标签属性transition,直接使用就可以了: 用transition标签把需要慢慢显示的组件包起来. 然后在目前组件下面的style属性里面添 ...
- [bug]小米部分机型(5x、mix2)中，文字/背景闪现然后消失
2/9更新 后来遇到float 元素也这样,改成flex布局就没问题.不知道具体原因. 描述: 使用vue 2.4开发HTML5时,遇到在小米部分机型(5x.mix2)中,文字/文字背景闪现然后消失. ...
- Vue中常用的8种v指令
Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text="变量/表达式" 文本的设置 字符串变量+数字可以 ...
- vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码 但是不管哪一种,导进的css文件都是应用于全局的 ...
- Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
- vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
- Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
- vue中使用checkbox
在vue中,通过v-model来判断当前checkbox是否被选中, 它绑定一个数组,选中项的值会自动添加到数组中. 如果我们要求选项至少选择一个值,我们来通过disabled来禁止用户取消点击选项 ...
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩 源码在文末. 前言 上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
- vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
最新文章
- 《Windows驱动开发技术详解》读书笔记（一）
- CodeForces - 1332B Composite Coloring(数论+构造)
- weiapi2.2 HelpPage自动生成接口说明文档和接口测试功能
- jsp页面中插入css样式的三种方法总结
- C语言编写一个计算器（附全源代码）
- 【机器学习】数据处理详解
- C语言 分数加减运算
- 小程序开发小游戏注意事项
- 烧脑又过瘾！这个被严重低估的学习方法，看完瑟瑟发抖！
- MATLAB与高等数学--dsolve命令
- Element UI, Ant Design Vue
- Multisim仿真—恒流源电路（一）
- ASO小技能：自动输入搜索框文本
- HLG 1916 小Z的卡片 （set 难题）恏似系亚洲区噶题
- Vue学习25_Vue的异步操作Promise
- 【LoVissy学习笔记】用Python3.82自动发送邮件。QQ邮箱
- 什么是群体智能（集群智能）？蜂群思维？
- Linux下的readelf 指令和file指令
- hp1005mfp打印机驱动下载，打印机驱动安装方法
- 2022 年 8 月初北上广深杭热门签到打卡点微博数据集