码迷,mamicode.com
首页 > Web开发 > 详细

第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

时间:2019-06-06 21:16:05      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:style   app   vue   name   覆盖   表达式   tle   没有   init   

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>

 

第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

标签:style   app   vue   name   覆盖   表达式   tle   没有   init   

原文地址:https://www.cnblogs.com/songsongblue/p/10986703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!