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