介紹三種資料和畫面綁定常用的方式
可以直接將資料顯示在綁定的 html 標籤
內,與 {{}}
最大的差異在於 v-text
會取代原本標籤內的內容,而 {{}}
則是不會。像是 message
變數用 v-text
放入 p 段落
,則 p 段落
原本的內容就被取代。
功能和 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>
常用在輸入欄位或表單值的綁定,像是上面的 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>