溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue.js學(xué)習(xí)筆記： 數(shù)據(jù)綁定語法---綁定表達(dá)式

發(fā)布時間：2020-07-02 12:17:16 來源：網(wǎng)絡(luò) 閱讀：2890 作者：frwupeng517 欄目：開發(fā)技術(shù)

1.JavaScript表達(dá)式

放在雙大括號標(biāo)簽內(nèi)的文本稱為綁定表達(dá)式。在Vue.js中，一段綁定表達(dá)式由一個簡單的JS表達(dá)式和可選的一個或多個過濾器構(gòu)成

HTML：

<span id="test01">數(shù)字加減：{{number+1}}</span><br>
<span id="test02">三目運(yùn)算：{{ok?'yes':'no'}}</span><br>
<span id="test03">JS表達(dá)式：{{message.split('').reverse().join('')}}</span><br>

JS：

var vm1=new Vue({
    el:'#test01',
    data:{
        number:3
    }
});
var vm2=new Vue({
    el:'#test02',
    data:{
        ok:'yes'
    }
});
var vm3=new Vue({
    el:'#test03',
    data:{
        message:'Roger'
    }
});


2.過濾器

Vue.js允許在表達(dá)式后添加可選的“過濾器(Filter)”，以“管道符”指示。

這里我們將表達(dá)式message的值“管輸（pipe）”到內(nèi)置的capitalize過濾器，這個過濾器其實(shí)只是一個JS函數(shù)，返回大寫話的值。 Vue.js提供了數(shù)個內(nèi)置過濾器

HTML：

<span id="test04">{{message|capitalize}}</span> <!--capitalize:首字母大寫-->

JS：

var vm4=new Vue({
    el:'#test04',
    data:{
        message:'hello'
    }
});


頁面效果截圖：

Vue.js學(xué)習(xí)筆記： 數(shù)據(jù)綁定語法---綁定表達(dá)式

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手