vue 插值 v-once,v-text, v-html詳解
更新時間：2018年01月19日 09:17:19 作者：鐘離野
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
引入Vue.js ，通過script形式，vue官網(wǎng)語法記錄
創(chuàng)建vue應(yīng)用，數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的
1：插值
缺點(diǎn)：讓你的網(wǎng)速慢，或者數(shù)據(jù)加載失敗時，會在瀏覽器中直接渲染插值【js禁用，javascript報錯也會導(dǎo)致這個問題】
html：
<section id="content">
<p id="Mustache">沒有v-once, {{msg}}</p>
</section>
js:
var vm = new Vue({
el:"#content",
data: {
msg: "hello my lord"
}
});
result：
2：v-once:通過使用 v-once 指令,執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會繼續(xù)更新】
html:
<section id="content">
插值:
<p id="Mustache">{{msg}}</p>
<p>v-once:當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新</p>
<span v-once>{{msg}}</span>
</section>
js:
var vm = new Vue({
el:"#content",
data: {
msg: "hello once"
}
});
result:
3、v-text和v-html
html:
<section id="content"> v-text： <span v-text="tipHtml"></span><br> 原始 HTML:v-html指令 <span v-html="tipHtml"></span> </section>
js:
var vm = new Vue({
el:"#content",
data: {
tipHtml: "<b>小心點(diǎn)，明天</b>"
}
});
結(jié)果：
總結(jié)：v-text:會把html標(biāo)簽也解析為文本，而v-html可以解析html標(biāo)簽。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
web開發(fā)中如何優(yōu)雅的解決"重復(fù)請求"問題
在我們的日常開發(fā)當(dāng)中,很多時候會出現(xiàn)短時間內(nèi)重復(fù)請求的情況,如果沒有妥當(dāng)?shù)靥幚砗蠊車?yán)重,這篇文章主要給大家介紹了關(guān)于web開發(fā)中如何優(yōu)雅的解決重復(fù)請求問題的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))
這篇文章主要介紹了Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue watch監(jiān)聽對象及對應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了Vue組件之間的數(shù)據(jù)共享，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了Vue自定義詢問彈框和輸入彈框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
Vue項(xiàng)目優(yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目優(yōu)化的一些實(shí)戰(zhàn)策略，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue兩個輸入框聯(lián)動校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗(yàn)方式(最大值-最小值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10