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

主要分为两步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="view

mwh_user

7802人浏览 · 2020-12-02 23:10:10

mwh_user · 2020-12-02 23:10:10 发布

主要分为两步

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>