Vue.js入門#10 – Vue.jsでWebアプリケーションを作ろう!
タスクを表示しよう&バリデーション【Vue3】
今回の記事では、Vue.jsを使用してWebアプリケーションを作成する方法について見ていきます。また、タスクを表示する方法とバリデーションの実装についても解説します。
タスクの表示
まずは、Vue.jsを使用してタスクを表示する方法について見ていきましょう。以下のコードは、タスクを表示するためのVueコンポーネントを定義する例です。
<template>
<div>
<ul>
<li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [
{ id: 1, name: 'Task 1' },
{ id: 2, name: 'Task 2' },
{ id: 3, name: 'Task 3' }
]
};
}
};
</script>
バリデーションの実装
次に、Vue.jsを使用してフォームのバリデーションを実装する方法について見ていきましょう。以下の例では、入力値の長さが3文字以上であることをバリデーションしています。
<template>
<div>
<input v-model="taskName" />
<button @click="addTask">Add Task</button>
<span v-if="errorMessage" style="color: red">{{ errorMessage }}</span>
</div>
</template>
<script>
export default {
data() {
return {
taskName: '',
errorMessage: ''
};
},
methods: {
addTask() {
if (this.taskName.length >= 3) {
this.tasks.push({ id: this.tasks.length + 1, name: this.taskName });
this.taskName = '';
this.errorMessage = '';
} else {
this.errorMessage = 'Task name must be at least 3 characters long';
}
}
}
};
</script>
以上で、Vue.jsを使用してWebアプリケーションを作成し、タスクの表示とバリデーションの実装について解説しました。これらの機能を組み合わせることで、より複雑なWebアプリケーションを開発することができます。ぜひ、自分で試してみてください!