iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Modern Web

少年學Vue,如隙中窺月系列 第 4

[Day4] 資料與畫面綁定的方法

  • 分享至 

  • xImage
  •  

介紹三種資料和畫面綁定常用的方式

v-text

可以直接將資料顯示在綁定的 html 標籤內,與 {{}} 最大的差異在於 v-text 會取代原本標籤內的內容,而 {{}} 則是不會。像是 message 變數用 v-text 放入 p 段落,則 p 段落原本的內容就被取代。

v-html

功能和 v-text 一樣,將資料直接顯示在綁定的 html 標籤內,也會取代標籤內原本的內容,與 v-text 差異在於如果綁定的資料有包含 html 標籤v-html 會渲染所包含的標籤在網頁上,而不單純只是純文字。像是 message變數因為有包含 a 標籤,所以畫面就會渲染出連結的樣式,用法就像是 js 的innerHTML。最後官網有提醒我們,不要任意讓用戶輸入的資料用 v-html 方式呈現,因為這樣可能會產生 XSS 攻擊,不法人士可以在輸入欄位中插入惡意程式碼,並且透過網頁渲染執行,造成網頁資安風險。

<body>
    <div class="app">
       <p>不會{{message}}取代</p>
        <p v-text="message" >被取代</p>
        <p v-html="message" >被取代</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            message: '<a href="#">Hello Vue</a>',
        }
    });
</script>

https://i.imgur.com/8Edq344.png

v-model

常用在輸入欄位或表單值的綁定,像是上面的 input 輸入欄位就綁定資料 message,當 input 值改變則 message 值也會跟著改變,而 message 在畫面顯示的值也會跟著更動。

<body>
    <div class="app">
        輸入:<input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            message: '',
        }
    });
</script>

https://i.imgur.com/tyOaXH1.png


上一篇
[Day3] MVVM 架構
下一篇
[Day5] 物件和陣列
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言