vue範本插值操作（總結分享）

這篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於VUE模板插值操作的相關問題，其中包括了mustache、v-once、v-html、v -text等等內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##範本語法的插值運算

• v-html 往標籤內部插入html文字

• v-text 往標籤內部插入普通文字(解析不了標籤)

• v-pre 在介面上直接展示鬍子語法

• v-cloak 隱藏資料渲染到頁面之前，鬍子語法在介面上的展示

Mustache

mustache語法就是兩個大括號"{

{}}" ,mastache語法不只直接可以寫值，也可以寫一些簡單的表達式。

<div>
    <h1>{{counter * 2}}</h1>
    <h1>{{message}} kebe</h1>
    <h1>{{message + ' ' + firstName + ' ' + lastName}}</h1>
    <h1>{{message}}{{firstName}}{{lastName}}</h1>
    <h1>{{message}} {{firstName}} {{lastName}}</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            counter: 100,
            message: &#39;你好！&#39;,
            firstName: &#39;kebe&#39;,
            lastName: &#39;bryant&#39;
        }
    })

</script>

v-once

作用為定義它的元素或元件只會渲染一次，在修改變數中的值時，頁面的值並不改變。

<div>
    <h1>未加v-once指令:{{message}}</h1>
    <h1>加v-once指令:{{message}}</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
    })

</script>

效果圖：

v-html

#v-html指令會將後端傳回的資料以html程式碼的方式插入，而不是文字方式插入。

<div>
    <h1>{{url}}</h1>
    <h1></h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            url: &#39;<a href="http://www.baidu.com">百度一下&#39;
        }
    })
</script>

效果圖：

v-text

將輸入以文字的方式插入標籤中，與mustache相似，但是指令不常使用，原因在於v-text無法進行字串拼接。

<div>
    <h1>{{message}},kebe</h1>
    <h1>kebe</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
    })
</script>

效果圖：

v-pre

#該指令會告訴vue將標籤中的表達式/文字不要解析，原封不動的展示出來，例如寫mustache語法時，vue會將變數的值解析出來插入標籤中，那如果我要將mustache語法以文檔的方式顯示在頁面呢？答案就是用v-pre。

<div>
    <h1>{{message}}</h1>
    <h1>{{message}}</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
    })
</script>

效果圖：

v-cloak

在瀏覽器渲染html時，如果vue請求後端網路延遲，資料無法及時傳回並賦值於變量，那麼瀏覽器無法顯示變數的值，就會將mustache語法當作文字顯示在頁面中。 v-cloak指令在vue進行解析時，會把它去掉，也就是說我們可以先使用v-cloak屬性將標籤隱藏起來，在vue解析時，自動去掉v-cloak，標籤就會顯示出來，這時標籤中包含的變數是有值的。因此不會出現因網路延遲造成直接顯示表達式的問題，進而提高使用者體驗。然而，這個指令後續也不常用，因為在實際開發中，vue頁面的模板會被渲染成函數，真正使用的其實是虛擬DOM，因此不會有這種情況。

    <style>
        /* 将有带有v-cloak属性的标签隐藏起来  */
        [v-cloak]{
            display: none;
        }
    </style>
    <div>
        <h1>{{message}}</h1>
        <h1>{{message}}</h1>
    </div>
<script></script>
<script>
    //延时1秒，模拟网络超时，数据无法及时插入
    setTimeout(function(){
        //vue解析时去掉v-cloak属性，标签显示
        const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
        })
    },1000)
</script>

效果圖：

沒有加v-cloak屬性的標籤，在延時時直接顯示表達式

加v-cloak屬性的標籤會隱藏掉

有v-cloak的標籤，當vue解析時去掉v-cloak，標籤顯示，值顯示

沒有v-cloak的標籤，vue解析時，給表達式賦值，顯示的表達式變成具體的值

【相關推薦：

javascript影片教學、web前端 】

以上是vue範本插值操作（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！