在vue中有關(guān)插值的詳細(xì)介紹說(shuō)明

引入Vue.js ，通過(guò)script形式，vue官網(wǎng)語(yǔ)法記錄

創(chuàng)建vue應(yīng)用，數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的

1：插值

缺點(diǎn)：讓你的網(wǎng)速慢，或者數(shù)據(jù)加載失敗時(shí)，會(huì)在瀏覽器中直接渲染插值【js禁用，javascript報(bào)錯(cuò)也會(huì)導(dǎo)致這個(gè)問(wèn)題】

html：

<section id="content">
<p id="Mustache">沒(méi)有v-once, {{msg}}</p>
</section>

js:

 var vm = new Vue({
 el:"#content",
 data: {
 msg: "hello my lord"
 }
 });

result：

2：v-once:通過(guò)使用 v-once 指令,執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)繼續(xù)更新】

html:

 <section id="content">
 插值:
 <p id="Mustache">{{msg}}</p>
 <p>v-once:當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新</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:會(huì)把html標(biāo)簽也解析為文本，而v-html可以解析html標(biāo)簽。

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在微信小程序中有關(guān)button組件的使用說(shuō)明

在微信小程序中如何使用progress組件

有關(guān)$.ajax()方法中如何從服務(wù)器獲取json數(shù)據(jù)

使用MUI框架如何加載外部網(wǎng)頁(yè)或服務(wù)器數(shù)據(jù)

詳細(xì)講解Vue單元測(cè)試中Karma+Mocha

在vue中如何使用Nprogress.js進(jìn)度條

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com