Vue.js

To-do List

　簡単なリストの追加や削除を行う To-do List のサンプルです。このコードは、v-forディレクティブを使ってリストをレンダリングし、アイテムの追加や削除を行うことで、Vue.jsの状態管理やリスト操作の基礎を学ぶことができます。

To-do List

　このサンプルでは、ユーザーがリストに新しいアイテムを追加したり、既存のアイテムを削除したりすることができます。v-forディレクティブでリストを表示し、@clickディレクティブでボタンにクリックイベントを紐付けています。

HTML

<div id="app">
	<p>To-do List</p>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
			<button @click="removeItem(index)">delete</button>
		</li>
	</ul>
	<input v-model="newItem" placeholder="Add new items">
	<button @click="addItem">Addition</button>
</div>
<script>
	<!-- JavaScript code here -->
</script>

CSS

button {
	box-shadow: 0.2ex 0.2ex 0.3ex;
	display: inline-block;
	font-size: larger;
	margin: 1ex;
	padding: 1ex 2ex;
}
div {
	margin-bottom: 1rem;
}
p {
	font-size: larger;
	font-weight: bold;
	margin-bottom: 0;
	text-decoration: underline 0.1em;
}

JavaScript

const app = Vue.createApp({
	data() {
		return {
			newItem: '',
			items: ['sample1', 'sample2', 'sample3']
		};
	},
	methods: {
		addItem() {
			if (this.newItem) {
				this.items.push(this.newItem);
				this.newItem = '';
			}
		},
		removeItem(index) {
			this.items.splice(index, 1);
		}
	}
});

app.mount('#app');