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>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。