1.文本

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

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

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

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

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

2.純html

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

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

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

復合局部模版，因為vue不是基于字符串的模版引擎。組件更適合單人UI重用與復合的基本單元。

站點上動態(tài)渲染的任意html可能會非常危險，因為它會很容易導致XSS攻擊。

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

3.屬性

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

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

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

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

4.使用JavaScript表達式

迄今為止，在我們的模版中我們一直都值綁定簡單的屬性鍵值。但實際上，對于

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

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

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

每個限制就是，每個綁定都只能包含單個表達式，所以下面不會生效

//這句是語句不是表達式{{var a = 1}}//流控制也不會生效，請使用三元表達式{{if(ok){return message}}}

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

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

以上所述是小編給大家介紹的vue模板語法-插值詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！