欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue模板插值操作實例代碼分析

今天小編給大家分享一下vue模板插值操作實例代碼分析的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

專注于為中小企業(yè)提供網(wǎng)站設計制作、網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)阿克蘇免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

vue模板插值操作實例代碼分析

模板語法的插值操作

  • v-html 往標簽內(nèi)部插入html文本

  • v-text 往標簽內(nèi)部插入普通文本(解析不了標簽)

  • v-pre 在界面上直接展示胡子語法

  • v-cloak 隱藏數(shù)據(jù)渲染到頁面之前，胡子語法在界面上的展示

Mustache

mustache語法就是兩個大括號"{{}}" ,mastache語法不僅直接可以寫值，也可以寫一些簡單的表達式。

<body>
<div id="app" >
    <h2>{{counter * 2}}</h2>
    <h2>{{message}} kebe</h2>
    <h2>{{message + ' ' + firstName + ' ' + lastName}}</h2>
    <h2>{{message}}{{firstName}}{{lastName}}</h2>
    <h2>{{message}} {{firstName}} {{lastName}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用戶掛載要管理的元素 
        data:{ //定義數(shù)據(jù)
            counter: 100,
            message: '你好！',
            firstName: 'kebe',
            lastName: 'bryant'
        }
    })

</script>
</body>

v-once

作用為定義它的元素或者組件只會渲染一次，在修改變量中的值時，頁面的值并不發(fā)生改變。

<div id="app" >
    <h2>未加v-once指令:{{message}}</h2>
    <h2 v-once >加v-once指令:{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用戶掛載要管理的元素 
        data:{ //定義數(shù)據(jù)
            message: '你好！'
        }
    })

</script>

效果圖：
vue模板插值操作實例代碼分析

v-html

v-html指令會將后端返回的數(shù)據(jù)以html代碼的方式插入，而不是文本方式插入。

<div id="app" >
    <h2>{{url}}</h2>
    <h2 v-html="url" ></h2>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用戶掛載要管理的元素 
        data:{ //定義數(shù)據(jù)
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

效果圖：
vue模板插值操作實例代碼分析

v-text

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

<div id="app" >
    <h2>{{message}},kebe</h2>
    <h2 v-text="message">kebe</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用戶掛載要管理的元素 
        data:{ //定義數(shù)據(jù)
            message: '你好！'
        }
    })
</script>

效果圖：
vue模板插值操作實例代碼分析

v-pre

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

<body>
<div id="app" >
    <h2>{{message}}</h2>
    <h2 v-pre >{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用戶掛載要管理的元素 
        data:{ //定義數(shù)據(jù)
            message: '你好！'
        }
    })
</script>
</body>

效果圖：
vue模板插值操作實例代碼分析

v-cloak

在瀏覽器渲染html時，如果vue請求后端網(wǎng)絡延時，數(shù)據(jù)無法及時返回并賦值于變量，那么瀏覽器無法顯示變量的值，就會將mustache語法當作文本顯示在頁面中。v-cloak指令在vue進行解析時，會把它去掉，也就是說我們可以先使用v-cloak屬性將標簽隱藏起來，在vue解析時，自動去掉v-cloak，標簽就會顯示出來，這時標簽中包含的變量是有值的。因此不會出現(xiàn)因網(wǎng)絡延遲造成直接顯示表達式的問題，從而提高用戶體驗。然而，這個指令后續(xù)也不常用，因為在實際開發(fā)中，vue頁面的模板會被渲染成函數(shù)，真正使用的其實是虛擬DOM，因此不會存在這種情況。

<body>
    <style>
        /* 將有帶有v-cloak屬性的標簽隱藏起來  */
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app" >
        <h2>{{message}}</h2>
        <h2 v-cloak >{{message}}</h2>
    </div>
<script src="./js/vue.js"></script>
<script>
    //延時1秒，模擬網(wǎng)絡超時，數(shù)據(jù)無法及時插入
    setTimeout(function(){
        //vue解析時去掉v-cloak屬性，標簽顯示
        const app = new Vue({
        el: "#app", //用戶掛載要管理的元素 
        data:{ //定義數(shù)據(jù)
            message: '你好！'
        }
        })
    },1000)
</script>
</body>

效果圖：

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

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

vue模板插值操作實例代碼分析
有v-cloak的標簽，當vue解析時去掉v-cloak，標簽顯示，值顯示

沒有v-cloak的標簽，vue解析時，給表達式賦值，顯示的表達式變?yōu)榫唧w的值

vue模板插值操作實例代碼分析

以上就是“vue模板插值操作實例代碼分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：vue模板插值操作實例代碼分析
鏈接URL：http://chinadenli.net/article44/gicdhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、網(wǎng)站維護、、定制網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作