Leo's Space

我寫故我在

0%

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

發表於 更新於 分類於 ， Disqus：
文章字數： 1.4k 所需閱讀時間 ≈ 1 分鐘

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

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 攻擊，不法人士可以在輸入欄位中插入惡意程式碼，並且透過網頁渲染執行，造成網頁資安風險。

1
2
3
4
5
6
7
<body>
    <div class="app">
       <p>不會{{message}}取代</p>
        <p v-text="message" >被取代</p>
        <p v-html="message" >被取代</p>
    </div>
</body>
1
2
3
4
5
6
7
8
9
<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 在畫面顯示的值也會跟著更動。

1
2
3
4
5
6
<body>
    <div class="app">
        輸入：<input type="text" v-model="message">
        {{message}}
    </div>
</body>
1
2
3
4
5
6
7
8
9
<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