Vue中v-cloak/v-pre的作用_v-cloak与v-pre

作者：你好赵伟 | 2024-03-06 09:48:23

踩

v-cloak与v-pre

v-clock的作用：

<!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;
    }
  </style>
</head>
<body>

  <div id="app">
    <!-- v-pre指定这个范围不被vue作用 -->
    <div v-pre>
      <!-- 这内部不要在使用vue的任何指令 -->
      <p :title="message">{{message}}</p>
    </div>

    <div v-cloak>
      <!-- 防止在vue不作用时，{{}}出现闪烁 -->
      <h1 v-text="message"></h1>
      <h1>{{message}}</h1>
    </div>

    <h1 v-text="message"></h1>
    <h1>{{message}}</h1>
    <!-- 只解析一次 -->
    <div v-once>
      <h1 v-text="message"></h1>
    </div>


  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      methods: {
       
      }
    })

  </script>

  
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/197642