Vue.js

`v-bind` in Vue.js 3 is a directive used to dynamically bind Vue's data properties to HTML attributes.

v-bind

　v-bindは、Vue.jsにおいて HTML属性に動的なデータをバインドするためのディレクティブです。通常、HTML属性は静的な値を受け取りますが、v-bindを使用することで、Vue.jsのデータプロパティを属性に結びつけることができます。

　v-bindの基本的な構文は次の通りです。

HTML

<div v-bind:id="dynamicId"></div>

　上記の例では、dynamicIdというデータプロパティの値が id属性にバインドされます。

　また、v-bindは短縮形で使用することもできます。: 記号を使うことで、次のように書けます。

HTML

<div :id="dynamicId"></div>

Hello, Vue!

　この例では、v-bindを使って classと value属性を動的にバインドしています。また、@inputを使ってフォーム入力の値をリアクティブに更新する機能を実装しています。

HTML

<div id="app">
	<p :class="className">Hello, Vue!</p>
	<input :value="inputValue" @input="updateValue">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const { createApp } = Vue;

createApp({
	data() {
		return {
			className: 'highlight',
			inputValue: 'Initial Value'
		}
	},
	methods: {
		updateValue(event) {
			this.inputValue = event.target.value;
		}
	}
}).mount('#app');