在vue中有關插值的詳細說明說明

這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，現在分享給大家，也給大家做個參考。

引入Vue.js ，透過script形式，vue官網語法記錄

創建vue應用，資料和DOM 已經被建立了關聯，所有東西都是響應式的

1：插值

缺點：讓你的網速慢，或是資料載入失敗時，會在瀏覽器中直接渲染插值【js停用，javascript報錯也會導致這個問題】

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 指令,執行一次的插值【當資料改變時，插值處​​的內容不會繼續更新】

##html:

 <section id="content">
   插值:
   <p id="Mustache">{{msg}}</p>
   <p>v-once:当数据改变时，插值处的内容不会更新</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>小心点，明天</b>"
    }
  });

結果：

總結：v-text:會把html標籤也解析為文本，而v-html可以解析html標籤。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在微信小程式中有關button元件的使用說明

在微信小程式中如何使用progress元件

有關$.ajax()方法中如何從伺服器取得json資料

使用MUI框架如何載入外部網頁或伺服器資料

詳細講解Vue單元測試中Karma Mocha

#在vue中如何使用Nprogress.js進度條

以上是在vue中有關插值的詳細說明說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！