解决vue页面加载时和v-if切换时出现的闪屏/闪烁问题

最新推荐文章于 2024-09-03 18:03:15 发布

minx_6688

最新推荐文章于 2024-09-03 18:03:15 发布

阅读量7.7k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/mwh_user/article/details/110505783

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

主要分为两步

1.设置css，注意加！important，方便处理css层级覆盖问题
[v-cloak]{display:none!important}

2.在元素上添加v-cloak指令
3.直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak]{display:none!important}
  </style>
</head>
<body>
  <div id="app" >
    <div v-cloak style="display: flex;">
      <div >{{info.name}}</div>
      <div >{{info.age}}</div>
      <div >{{info.sex}}</div>
    </div>
    <div @click="sett">切换</div>
    <div v-if="ist" v-cloak>{{info.name}}</div>
    <div v-else v-cloak>{{info.age}}</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          info:{
            name: '张三',
            age: 18,
            sex: '男'
          },
          ist: true
        }
      },
      methods: {
        sett () {
          this.ist = !this.ist
        }
      }
    })
  </script>
</body>
</html>