vue的不常用指令

3月

本文最后更新于2020年03月08日，已经过了1776天没有更新，若内容或图片失效，请留言反馈

v-html

在mustache语法中双大括号会将数据解释为普通文本，想要输出html代码，需要使用v-html指令

text 代码:

<div id="app">
         <h1>{{url}}</h1>
        <h1 v-html="url">这是原本的内容</h1>
</div>
        
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">        
        const app = new Vue({
            el:"#app",
            data:{
                url:"<a href='http://www.baidu.com'>百度一下</a>",
            }
            
        })
    </script>

运行结果
请输入图片描述

v-text
与v-html用法相同，但输出的是纯文本，

text 代码:

<div id="app">
    <h1>{{message}} + " " + 这是原本的内容</h1>
    <h1 v-text="message">+" " + 这是原本的内容</h1>
</div>
        
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">        
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello",
            }
            
        })
    </script>

运行结果

hello 这是原本的内容
hello

注：v-html与v-text指令都会覆盖标签中原本的内容

v-pre
让vue不对标签中的mustache进行解析，将其原封不动的显示到页面中

text 代码:

<div id="app">
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>
</div>
        
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">        
        const app = new Vue({
            el:"#app",
            data:{
                message:"v-pre表示不解析{{}}中的内容",
            }
            
        })
    </script>

运行结果

v-pre表示不解析{{}}中的内容
{{message}}

v-cloak
如果在vue解析之前挂载的元素中有一个v-cloak元素，解析之后会将v-cloak元素删除。

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>    
<div id="app">
        <h1>{{message}}</h1>
        <h1 v-cloak>{{message}}</h1>
</div>        
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">    
        setTimeout(function(){
            const app = new Vue({
                el:"#app",
                data:{
                    message:"v-cloak在vue解析之后会被清除",
                }
            })
        },1000)
    </script>
</body>
</html>

代码中我们让vue延迟一秒后在解析，并使用元素选择器为v-cloak指令设置隐藏属性，让使用了v-cloak指令的标签隐藏。

代码运行时会先显示

{{message}}

一秒钟后

v-cloak在vue解析之后会被清除
v-cloak在vue解析之后会被清除

当vue因为某些原因解析延迟时，挂载元素中的mustache将语法无法被解析，并原封不动的显示在页面上。在为标签添加v-cloak指令后，当vue未解析挂载的元素时，v-cloak指令会使标签被隐藏，当vue解析完成后，v-cloak指令被清除，标签显示。
注：v-cloak在开发中基本不会使用

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢