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開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
最近在用vue做移動端項目，網(wǎng)上找了一些移動端適配的方案，個人覺得手淘團隊flexible.js還是比較容易上手，在這里做下總結(jié)。對vue.js移動端配置flexible.js 相關(guān)知識感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了axios簡單實現(xiàn)小程序延時loading指示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法,結(jié)合實例形式詳細(xì)分析了VUE使用JS修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下2019-12-12
vue 實現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
下面小編就為大家分享一篇vue 實現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
Vue3實現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構(gòu)建功能強大、風(fēng)格統(tǒng)一的頁面,本文給大家介紹了Vue3實現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下2024-08-08
本篇文章主要介紹了在vue中獲取dom元素內(nèi)容的方法，可以通過給標(biāo)簽加ref屬性，這里整理了詳細(xì)的代碼,有興趣的可以了解一下2017-07-07
Vue3.0監(jiān)聽器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過在組合式 API 中,watch 的使用方式與選項式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽器watch與watchEffect,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中的 v-model組件封裝(類似彈窗組件),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01