Vue – 關於 v-html 的用法解說

2017-06-04 / JSN / 2 Comments / 10,039 次瀏覽

官方說明

HTML

• google 因為放在 v-html 中，所以整串 div 會被替換為 HTML 字串
• jsnwork 因為不放在 v-html 中，所以 {{jsnwork}} 被替換後會顯示 <a> 文字，而非 HTML 編碼。另外要注意，鬍子格式 (Mustache) 的變數寫法，Vue 規定是不能寫在屬性喔。

<div class="app">
	<div v-html="google"></div>
	<div>{{jsnwork}}</div>
</div>

JS

var app = new Vue({
	el: '.app', 
	data: {
		jsnwork: '<a href="http://jsnwork.kiiuo.com">Jsnwork</a>',
		google: '<a href="http://google.com">Google</a>'
	},
})