v-text v-html等指令的使用

v-text：以纯文本方式显示数据；

v-html：可以识别HTML标签；

v-once：只渲染元素或组件一次；

v-pre：不进行编译，直接显示内容；

v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{{}}；

v-text与v-html的示例：

<script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        window.onload= () =>{new Vue({
            el:'#two',
            data:{
                msg:"欢迎来到perfect*博客园！！！"
                
                
            }
            
            
            
        })
        }
    </script>
    <body>
        <div id="two">
        <input type="text" v-model="msg" />
        <h2>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg"></h2>
            
</div>
    </body>

由效果图可以看出v-html可以识别HTML标签，进行了换行

v-once与v-pre指令：

代码只修改了HTML部分，代码：

<body>
        <div id="two">
        <input type="text" v-model="msg" />
        <h2 v-pre>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg" v-once></h2>
            
</div>
    </body>

由效果图可知，v-once可控制不受input组件的影响，v-pre直接显示其内容

v-cloak指令

注意：需要进行写css样式，不然v-cloak指令无作用；

初始效果：

页面上有{{msg}}显示，而我们不想让它显示出来，因此需要使用v-cloak指令，并且写其样式：

最终效果如下：

vue:

<script>
        window.onload= () =>{new Vue({
            el:'#two',
            data:{
                msg:"欢迎来到perfect*博客园！！！"
                
                
            },
            created:function(){
                alert('生命周期函数!!');
            }
            
            
            
            
        })
        }
    </script>

css:

<style>
        [v-cloak]{
            display: none;
        }
    </style>

html:

<div id="two">
        <input type="text" v-model="msg" />
        <!--<h2 v-pre>{{msg}}</h2>-->
        <h2 v-cloak>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg" v-once></h2>
            
</div>

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>v-model</title>
 6     </head>
 7     <script type="text/javascript" src="../js/vue.js" ></script>
 8     <script>
 9         window.onload= () =>{new Vue({
10             el:'#two',
11             data:{
12                 msg:"欢迎来到perfect*博客园！！！"
13                 
14                 
15             },
16             created:function(){
17                 alert('生命周期函数!!');
18             }
19             
20             
21             
22             
23         })
24         }
25     </script>
26     <style>
27         [v-cloak]{
28             display: none;
29         }
30     </style>
31     <body>
32         <div id="two">
33         <input type="text" v-model="msg" />
34         <!--<h2 v-pre>{{msg}}</h2>-->
35         <h2 v-cloak>{{msg}}</h2>
36         <h2 v-text="msg"></h2>
37         <h2 v-html="msg" v-once></h2>
38             
39 </div>
40     </body>
41 </html>

以上示例所有代码

v-text v-html等指令的使用

猜你喜欢