vue模板語(yǔ)法-插值詳解

發(fā)布時(shí)間：2020-10-03 09:55:51 來(lái)源：腳本之家閱讀：138 作者：qq_34530330 欄目：web開(kāi)發(fā)

1.文本

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用‘Mustache'語(yǔ)法（雙打括號(hào)）的文本插值：

<span>message:{{msg}}</span>

使用v-once指令，也能執(zhí)行一次性的插值，當(dāng)主句改變時(shí)，插值處的內(nèi)容不會(huì)更新。

但請(qǐng)留心這回影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定：

<span v-once>this will nver change:{{message}}</span>

2.純html

雙打括號(hào)會(huì)將數(shù)據(jù)解釋為純文本，而非html。為了輸出html可以使用v-html指令：

<div v-html="rawhtml"></div>

被插入的內(nèi)容被當(dāng)做HTML---數(shù)據(jù)綁定會(huì)被忽略。注意，你不能使用v-html來(lái)

復(fù)合局部模版，因?yàn)関ue不是基于字符串的模版引擎。組件更適合單人UI重用與復(fù)合的基本單元。

站點(diǎn)上動(dòng)態(tài)渲染的任意html可能會(huì)非常危險(xiǎn)，因?yàn)樗鼤?huì)很容易導(dǎo)致XSS攻擊。

請(qǐng)只對(duì)可信內(nèi)容使用html插值，絕不要對(duì)用戶提供的內(nèi)容插值。

3.屬性

Mustache不能在html屬性中使用，應(yīng)使用v-bind指令；

<div v-bind:id="dynamicId"></div>

這對(duì)布爾值的屬性也有效--如果條件被求值為flase的話該屬性被移除

<button v-bind:disabled="someDynamicCondition">Button</button>

4.使用JavaScript表達(dá)式

迄今為止，在我們的模版中我們一直都值綁定簡(jiǎn)單的屬性鍵值。但實(shí)際上，對(duì)于

所有的數(shù)據(jù)綁定，Vue.js都提供了完全的Javascript表達(dá)式支持

{{nunber+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>

這些表達(dá)式會(huì)在所屬vue實(shí)例的數(shù)據(jù)作用域下作為哦JavaScript被解析。

每個(gè)限制就是，每個(gè)綁定都只能包含單個(gè)表達(dá)式，所以下面不會(huì)生效

//這句是語(yǔ)句不是表達(dá)式
{{var a = 1}}
//流控制也不會(huì)生效，請(qǐng)使用三元表達(dá)式
{{if(ok){return message}}}

模板表達(dá)式都被放在沙盒中，只能訪問(wèn)全局變量的一個(gè)白名單，如Math和Date。

不應(yīng)該在模板表達(dá)式中試圖訪問(wèn)用戶自定義的全局變量

以上所述是小編給大家介紹的vue模板語(yǔ)法-插值詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

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

猜你喜歡