Vue.js

In Vue.js 3, :item is the shorthand notation for v-bind, used to dynamically bind JavaScript data to HTML attributes.

:item

　Vue.js 3の v-bindディレクティブのショートカットである :itemについて説明します。

　まず、:itemは Vue.jsで「データを HTMLの属性にバインドする」ためのディレクティブです。例えば、v-bind:item="value"と書くと、item属性に valueという JavaScriptデータをバインドできます。:itemは v-bind:itemの短縮形です。

<div id="app">
	<ul>
		<li v-for="item in items" :key="item.id" :title="item.name">
			{{ item.name }}
		</li>
	</ul>
</div>

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

const { createApp } = Vue;

createApp({
	data() {
		return {
			items: [
				{ id: 1, name: 'Item 1' },
				{ id: 2, name: 'Item 2' },
				{ id: 3, name: 'Item 3' }
			]
		};
	}
}).mount('#app');

• :title="item.name" の部分が :itemの使用例です。ここでは item.nameというデータを title属性にバインドしています。
• v-forディレクティブでリストをループしながら、item.nameをそれぞれのリスト項目のタイトルとして設定しています。

　この方法で、JavaScriptのデータを HTMLの属性に動的にバインドできます。