vue插值的操作方法有哪些

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

從2013年開始創(chuàng)新互聯(lián)公司專注于”幫助中小企業(yè)+互聯(lián)網(wǎng)”, 也是目前成都地區(qū)具有實(shí)力的互聯(lián)網(wǎng)服務(wù)商。團(tuán)隊(duì)致力于為企業(yè)提供--站式網(wǎng)站建設(shè)、移動(dòng)端應(yīng)用( H5手機(jī)營(yíng)銷、App定制開發(fā)、微信開發(fā))、軟件開發(fā)、信息化解決方案等服務(wù)。

vue插值操作有：1、使用Mustache語(yǔ)法，語(yǔ)法“{{值}}”；2、使用v-once指令；3、使用v-html指令，可輸出html代碼；4、使用v-text指令，用于將數(shù)據(jù)顯示在界面中；5、使用v-pre指令；6、用v-cloak指令。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vue中的6種插值操作

第一種：Mustache

  • Mustache語(yǔ)法(也就是雙大括號(hào))。

  • Mustache: 胡子/胡須。（胡子語(yǔ)法）

數(shù)據(jù)是響應(yīng)式的

vue插值的操作方法有哪些

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{message}},world!</h3>
        <h3>{{counter * 2}}</h3>
        <h3>{{message}} {{counter}}</h3>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                counter:200
            },
            methods: {

            }
        })
    </script>
</body>

</html>

第二種：v-once

  • 該指令后面不需要跟任何表達(dá)式(比如之前的v-for后面是由跟表達(dá)式的)

  • 該指令表示元素和組件只渲染一次，不會(huì)隨著數(shù)據(jù)的改變而改變。

vue插值的操作方法有哪些

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{message}}</h3>
        <h3 v-once>{{message}}</h3>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            }
        })
    </script>
</body>

</html>

第三種：v-html

從服務(wù)器請(qǐng)求到的數(shù)據(jù)本身就是一個(gè)HTML代碼

該指令后面往往會(huì)跟上一個(gè)string類型，會(huì)將string的html解析出來(lái)并且進(jìn)行渲染

vue插值的操作方法有哪些

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{link}}</h3>
        <h3 v-html>{{link}}</h3>
        <h3 v-html="link"></h3>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                link: '<a href="http://www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>

</html>

第四種：v-text

  • v-text作用和Mustache比較相似：都是用于將數(shù)據(jù)顯示在界面中

  • v-text通常情況下，接受一個(gè)string類型

vue插值的操作方法有哪些

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{message}}</h3>
        <h3 v-text="message2"></h3>
        <h3 v-text="message2">{{message}}</h3>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                message2:'World'
            }
        })
    </script>
</body>

</html>

第五種：v-pre

v-pre用于跳過這個(gè)元素和它子元素的編譯過程，用于顯示原本的Mustache語(yǔ)法。

vue插值的操作方法有哪些

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{message}}</h3>
        <h3 v-pre>{{message}}</h3>
    </div>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                message:'Hello'
            }
        })
    </script>
</body>
</html>

第六種：v-cloak

  • 可能會(huì)直接顯然出未編譯的Mustache標(biāo)簽

  • cloak: 斗篷

vue插值的操作方法有哪些

vue插值的操作方法有哪些

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>Hello,{{name}}</h3>
        <h3 v-cloak>Hello,{{name}}</h3>
    </div>
    <script>
        setTimeout(()=>{
            let app=new Vue({
                el:'#app',
                data:{
                    name:'World'
                }
            })
        },10000)
    </script>
</body>
</html>

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

當(dāng)前題目：vue插值的操作方法有哪些
當(dāng)前地址：http://muchs.cn/article26/phocjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、微信公眾號(hào)、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站維護(hù)

廣告

聲明：本網(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)站制作