讓 Vue 渲染資料在畫面上的幾個指令

使用 JS 原生要將資料渲染,還要取得 DOM 元素後在進行操作,但是在 Vue 內則可以讓我們省略撰寫渲染的部分,由 Vue 本身來進行渲染,今天要介紹以下四種指令可以幫助我們達到渲染效果。

指令

就我目前了解,渲染資料可用下面四種指令:

  • {{ 資料名稱 }}
  • v-text 綁定在標籤上,Ex. v-text="資料名稱"
    • {{ }} = v-text
  • v-once 綁定在父層,內層放置資料名稱 Ex. <div v-once>{{ 資料名稱 }}</div>
    • 資料名稱放置於子層,而不是 v-once=”資料名稱”
    • 僅會輸出一次資料在畫面上,往後更新都不會更動
  • v-html 可以編譯 HTML 與法至標籤畫面上 Ex. v-html="資料名稱"
    • 不輕易讓用戶撰寫 HTML 語法,否則會用 XSS 攻擊風險;只可在可信內容上使用,不能用於提交內容上
    • 詳細說明可參考:https://cn.vuejs.org/v2/api/#v-html

程式範例

HTML

1
2
3
4
5
6
7
<div id="app">
<input class="form-control" v-model="text">
{{ text }}
<div v-text="text"></div>
<div v-once>{{ text }}</div>
<div v-html="text"></div>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
const app = {
data () {
return {
text: 0,
}
}
}

Vue.createApp(app).mount('#app');

結果

<input class="form-control" v-model="text"> 輸入 2<br>3

  • 顯示:`2
    3`
  • v-text 顯示:2<br>3

  • v-once 顯示:0

  • v-html 顯示:2


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)

本站所有文章除特別聲明外,均採用 BY-NC-SA 許可協議。轉載請註明出處!