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

vue模板插值操作實(shí)例代碼分析

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

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

vue模板插值操作實(shí)例代碼分析

模板語(yǔ)法的插值操作

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

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

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

  • v-cloak 隱藏?cái)?shù)據(jù)渲染到頁(yè)面之前，胡子語(yǔ)法在界面上的展示

Mustache

mustache語(yǔ)法就是兩個(gè)大括號(hào)"{{}}" ,mastache語(yǔ)法不僅直接可以寫(xiě)值，也可以寫(xiě)一些簡(jiǎn)單的表達(dá)式。

<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

作用為定義它的元素或者組件只會(huì)渲染一次，在修改變量中的值時(shí)，頁(yè)面的值并不發(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模板插值操作實(shí)例代碼分析

v-html

v-html指令會(huì)將后端返回的數(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模板插值操作實(shí)例代碼分析

v-text

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

<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模板插值操作實(shí)例代碼分析

v-pre

該指令會(huì)告訴vue將標(biāo)簽中的表達(dá)式/文本不要解析，原封不動(dòng)的展示出來(lái)，例如寫(xiě)mustache語(yǔ)法時(shí)，vue會(huì)將變量的值解析出來(lái)插入標(biāo)簽中，那如果我要將mustache語(yǔ)法以文檔的方式顯示在頁(yè)面呢？答案就是用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模板插值操作實(shí)例代碼分析

v-cloak

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

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

效果圖：

沒(méi)有加v-cloak屬性的標(biāo)簽，在延時(shí)時(shí)直接顯示表達(dá)式

加v-cloak屬性的標(biāo)簽會(huì)隱藏掉

vue模板插值操作實(shí)例代碼分析
有v-cloak的標(biāo)簽，當(dāng)vue解析時(shí)去掉v-cloak，標(biāo)簽顯示，值顯示

沒(méi)有v-cloak的標(biāo)簽，vue解析時(shí)，給表達(dá)式賦值，顯示的表達(dá)式變?yōu)榫唧w的值

vue模板插值操作實(shí)例代碼分析

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

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

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

廣告

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

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