vue中使用v-if隐藏元素时会出现闪烁问题的解决
目录
- 使用v-if隐藏元素时出现闪烁问题
- v-if控制显隐,页面加载出现闪现 v-cloak
使用v-if隐藏元素时出现闪烁问题
解决办法在div中加入v-cloak
<div class="mask" v-if="modelShow" v-cloak></div>
然后在css中
[v-cloak] { display: none; }
就OK啦~
v-if控制显隐,页面加载出现闪现 v-cloak
<div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-else-if="type === 'C'" v-cloak> C </div> <div v-else v-cloak> Not A/B/C </div> </div>
[v-cloak] { display:none; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue使用v-if v-show页面闪烁,div闪现的解决方法
在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>
-
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e
-
vue页面加载闪烁问题的解决方法
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho
-
vue中使用v-if隐藏元素时会出现闪烁问题的解决
目录 使用v-if隐藏元素时出现闪烁问题 v-if控制显隐,页面加载出现闪现 v-cloak 使用v-if隐藏元素时出现闪烁问题 解决办法在div中加入v-cloak <div class="mask" v-if="modelShow" v-cloak></div> 然后在css中 [v-cloak] { display: none; } 就OK啦~ v-if控制显隐,页面加载出现闪现 v-cloak <div id="d
-
Vue中通过属性绑定为元素绑定style行内样式的实例代码
1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h
-
VUE中V-IF条件判断改变元素的样式操作
方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></
-
Vue中img的src是动态渲染时不显示的解决
今天在项目中遇到一个需求,设计稿如下 就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用vue. 自然而然采用条件渲染,我的代码如下: 保存运行查看,发现没显示默认的图片,审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可,更改后代码为: 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
在vue中获取微信支付code及code被占用问题的解决方法
这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu
-
Vue中的@blur事件 当元素失去焦点时所触发的事件问题
目录 Vue @blur事件 当元素失去焦点时所触发的事件 @blur 是什么? @blur 怎么使用? Vue 使用@blur无效 Vue @blur事件 当元素失去焦点时所触发的事件 @blur 是什么? @blur 是当元素失去焦点时所触发的事件 @blur 怎么使用? <template> <div> <input type="text" placeholder="请输入内容" @blur="blur"/&g
-
Vue中Video标签播放解析后短视频去水印无响应解决
目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打
-
关于vue中watch检测到不到对象属性的变化的解决方法
前言 在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 <template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">upda
-
在Vue中使用this.$store或者是$route一直报错的解决
今天在引入路由参数和状态组件的时候发现一直报空找不到,但是我在控制台查看还能找得到 一直超费解,直到我在其他组件单独测试的时候又可以了 这是测试正常的 test1s : function(){ debugger var test1=this.$route.params.num; console.log(test1); return test1; } getRequest: (val)=> {//改变海黄学堂状态 debugger let thisRoute=this.$store.state.s
-
vue中this.$http.post()跨域和请求参数丢失的解决
目录 this.$http.post()跨域和请求参数丢失 this.http.post()参数需注意 this.$http.post()跨域和请求参数丢失 methods: { research: function () { //post请求远程资源 this.$http.post( //请求的url "http://www.hefeixyh.com/login.html", //请求参数,不能以get请求方式写:{params: {userName: "root123&q
随机推荐
- jquery和js实现对div的隐藏和显示方法
- VISTA下使用XP全拼输入法的办法
- 详解SpringBoot配置devtools实现热部署
- JavaScript之AOP编程实例
- ASP.NET Core 数据保护(Data Protection)中篇
- Laravel学习教程之路由模块
- C/C++中的名字空间与作用域示例详解
- Android实现广告图片轮播效果
- JS for循环中i++ 和 ++i的区别介绍
- 关于include标签导致js路径找不到的问题分析及解决
- 脚本 MsAgent组件 微软精灵 揪出系统自带的宠物
- cwrsync 四步实现windows备份
- JavaScript中将数组进行合并的基本方法讲解
- JQuery中clone方法复制节点
- jQuery简单实现对数组去重及排序操作实例
- jQuery+HTML5美女瀑布流布局实现方法
- 激光打印机出现故障检修大全第1/2页
- android编程实现设置、打开wifi热点共享供他人连接的方法
- 给ActiveX签名的实现方法详解
- JAVA程序内存溢出问题原因分析