iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
1
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 15

Day15 指令大全 v-show、v-html、v-text、v-pre、v-cloak、v-once

v-show:

與v-if相似,取決於它是控制顯示/隱藏該元素,但始終都存在DOM上,也就是CSS裡使用 display:none。
當然v-show是沒有v-else的用法的,也不支援加在<template>標籤上,這也是它的差異。

<p v-show="true">HelloWorld!</p>

v-html:

將資料當作HTML渲染在元素內,它等同於你使用 javascript 的 innerHtml 屬性,它會將你所綁定的資料解析成 HTML 顯示在 DOM 上。

<template>
  <div id="app">
    <p v-html="msg"></p>
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "<h1>Hello World</h1>",
        }
    }
}
</script>

但要注意使用v-html淺在的危險,因為假若讓使用者輸入時,會有機會讓有心人士塞入惡意script,簡而言之,不要用使用者所輸入的值綁在v-html指令上。

你的站點上動態渲染的任意HTML可能會非常危險,因為它很容易導致XSS攻擊。請只對可信內容使用HTML插值,絕不要對用戶提供的內容使用插值。

v-text:

將data解析渲染純文字內容,與{{ 插值表示式 }}相似,略有不同的地方是,在頁面加載時,你可能看到 {{ msg }} 稍微閃過的瞬間(可能不易察覺),而使用 v-text 屬性綁定元素則不會有此問題。

<template>
  <div id="app">
    <p v-text="msg"></p>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>

不須接表示式的指令:

v-pre:

會在編譯過程時忽略編譯該元素,也就是會按造原樣輸出,指令內的元素內容是甚麼就會顯示甚麼。

<template>
  <div id="app">
    <p v-pre>{{ msg }}</p> // 顯示{{ msg }}
    <p>{{ msg }}</p> // 顯示Hello World
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>

v-cloak:

編譯過程中一直保持在元素上,直到實體編譯結束,我們在v-text有講到關於{{插值表示式}} 在初始頁面加載時會有稍微閃過的瞬間,這時候就可以使用v-cloak。

<template>
  <div id="app">
    <p v-cloak>{{ msg }}</p>
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>
<style lang="scss">
[v-cloak] {
  display: none;
}
</style>

v-once:

將其內容首次渲染後,即便綁定的內容發生改變,也會視為靜態不再追蹤其變化。

<template>
  <div id="app">
    <p v-once>{{ msg }}</p> // 首次渲染後不再改變
    <p>{{ msg }}</p>  // 隨時跟著輸入改變
    <input type="text" v-model="msg">
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day14 指令大全 v-on
下一篇
Day16 資源回收再利用-可複用性 Mixins
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言