vue模板語法-插值詳解
1.文本
數(shù)據(jù)綁定最常見的形式就是使用‘Mustache'語法（雙打括號）的文本插值：
<span>message:{{msg}}</span>
使用v-once指令，也能執(zhí)行一次性的插值，當(dāng)主句改變時，插值處的內(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)容被當(dāng)做HTML---數(shù)據(jù)綁定會被忽略。注意，你不能使用v-html來
復(fù)合局部模版，因為vue不是基于字符串的模版引擎。組件更適合單人UI重用與復(fù)合的基本單元。
站點上動態(tài)渲染的任意html可能會非常危險，因為它會很容易導(dǎo)致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表達(dá)式
迄今為止，在我們的模版中我們一直都值綁定簡單的屬性鍵值。但實際上，對于
所有的數(shù)據(jù)綁定，Vue.js都提供了完全的Javascript表達(dá)式支持
{{nunber+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>
這些表達(dá)式會在所屬vue實例的數(shù)據(jù)作用域下作為哦JavaScript被解析。
每個限制就是，每個綁定都只能包含單個表達(dá)式，所以下面不會生效
//這句是語句不是表達(dá)式
{{var a = 1}}
//流控制也不會生效，請使用三元表達(dá)式
{{if(ok){return message}}}
模板表達(dá)式都被放在沙盒中，只能訪問全局變量的一個白名單，如Math和Date。
不應(yīng)該在模板表達(dá)式中試圖訪問用戶自定義的全局變量
以上所述是小編給大家介紹的vue模板語法-插值詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大，變大時略微大一點再變正常，取消點贊時愛心無動畫，同時數(shù)字滾動，+1 時向上滾動，-1 時向下滾動2021-05-05
這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對vue-router感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要介紹了Vue+mui實現(xiàn)圖片的本地緩存的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
在vue+element ui框架里實現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實現(xiàn)lodash的debounce防抖，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章通過圖文形式給大家介紹了vue項目的骨架及常用組件的相關(guān)知識，對此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
公司使用 vue-cli 創(chuàng)建的 vue項目 在初始化時并沒有做多頁面配置，隨著需求的不斷增加，發(fā)現(xiàn)有必要使用多頁面配置。這篇文章主要介紹了vue項目添加多頁面配置,需要的朋友可以參考下2019-05-05
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
通過Vue實現(xiàn)Excel文件的上傳和預(yù)覽功能
在業(yè)務(wù)系統(tǒng)中,Excel 文件作為一種常用的數(shù)據(jù)存儲和傳輸格式,經(jīng)常需要被處理和展示,這篇文章將講解如何通過 Vue 和 xlsx.js 實現(xiàn) Excel 文件的上傳和預(yù)覽功能,需要的朋友可以參考下2025-04-04