v-cloak解决表达式闪烁问题

时间 2019-12-07

标签 cloak 解决表达式闪烁问题繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
    <style>
      /* 2. 利用属性选择器选中v-cloak设置display：none */
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <!--       v-cloak指令能够用于解决表达式闪烁问题
      1. 首先找到你表达式闪烁的标签，给它加上v-cloak指令
     -->    <div id="app">
      <!-- 3. 当这个vue实例编译完成以后，它会把标签上的v-cloak指令移除掉 -->
      <p v-cloak>{{name}}</p>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          name: 'itcast'
        }
      })
    </script>
  </body>
</html>复制代码