v-html เอาไว้ใช้ทำอะไรใน vue.js

directive ที่ชื่อว่า v-html นั้นชื่อก็บอกอยู่แล้วว่าม้นต้องเกี่ยวข้องกับ HTML แน่นอน

ซึ่งความเกี่ยวข้องนั้นก็คือ มันจะแสดง tag HTML ใน ค่าที่มาจาก vue.js หากเราไม่ใช้ v-html แล้ว tag นั้นก็จะแสดงไม่ได้ เช่น

ไฟล์ html

<p>{{ quote }}</p>

ไฟล์ vue.js

	data() {
		return {
			goal: 'HI Course',
			goal2: 'Hey',
			quote: '<b> Hi v-html</br>',
			vueLink: 'https://vuejs.org/'
		};
	},

ผลที่ได้คือ {{ quote }}

จะสังเกตว่าค่าใน quote นั้นมี tag HTML อยู่ด้วย

เพราะงั้นเราถึงต้องใช้ v-html ไงล่ะ แก้ไขโค้ด html ใหม่เป็น

<p v-html="quote"></p>

เท่านี้ก็เรียบร้อยจ่ะ..