v-bind คืออะไร ใน vue.js

ปกติเราจะแสดงผลค่า properties เราจะใช้ {{ }} ครอบ เช่น

ไฟล์ index.html

	<section id="userSection">
		<h2>Hi</h2>
		<p>{{ customerName }}</p>

	</section>

	<script src="https://unpkg.com/vue@next"></script>
	<script src="app.js"></script>

ไฟล์ app.js

const app = Vue.createApp({
	data() {
		return {
			customerName: 'Ohm',
			vueLink: 'https://vuejs.org/'
		};
	}
});

app.mount('#userSection');

Note: data() { ….} เป็น short-hand ของการสร้างฟังก์ชัน แบบเต็มๆ คือ data: function() {….}

แต่ถ้าต้องการแสดงลิงค์เราจะใช้ {{ }} ภายใน <a> ไม่ได้ เช่น

<p><a href="{{vueLink}}">Vue.js Official site</a></p>

มันจะแสดงแบบนี้ {{ vueLink }}

เราจึงต้องนำ v-bind มาช่วย

bind แปลว่า ผูก, มัด, ติด

ให้เราทำการเพิ่ม v-bind: ไว้ในส่วนหน้าของ attribute ที่เราต้องจะเชื่อมกับตัวแปรของ vue เช่น

<p><a v-bind:href="vueLink">Vue.js Official site</a></p>

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