7 讲解v-cloak、v-text、v-html的基本使用
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 [v-cloak]{
10 display: none;
11 }
12 </style>
13
14 </head>
15
16 <body>
17 <div id="app">
18 <!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
19 <p v-cloak>{{msg}}</p>
20 <h4 v-text="msg"></h4>
21 <!-- 默认v-text是没有闪烁问题的 -->
22 <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 -->
23 <div>{{msg2}}</div>
24 <div v-text="msg2"></div>
25 <div v-html="msg2"></div>
26 </div>
27
28 <script src="./lib/vue-2.6.10.js"></script>
29
30 <script>
31 var vm = new Vue({
32 el:‘#app‘,
33 data:{
34 msg:‘123‘,
35 msg2:‘<h1>哈哈，我是h1</h1>‘
36 }
37 })
38 </script>
39 </body>
40 </html>
原文地址：https://www.cnblogs.com/songsongblue/p/10986703.html
时间： 2024-11-09 19:30:22