Vue.js入門 - リストレンダリング
リストレンダリング
Vue.jsのリストレンダリング機能を学びます。
タスク
基本的なリストレンダリング
v-forディレクティブを使って配列の要素を表示します
Todoリストの実装
v-forを使ってTodoリストを作成し、追加・削除機能を実装します
商品リストの表示
v-forを使って商品カードをグリッド表示します
ヒント
v-forディレクティブを使って、配列やオブジェクトの要素を繰り返し表示しましょう。
参考コード
// アプリケーションの作成
const app = Vue.createApp({
data() {
return {
// 基本的なリスト
items: ['りんご', 'バナナ', 'オレンジ', 'ぶどう'],
// Todoリスト
newTodo: '',
todos: [
{ id: 1, text: 'Vue.jsを学ぶ', completed: false },
{ id: 2, text: 'プロジェクトを作る', completed: false }
],
// 商品リスト
products: [
{
id: 1,
name: 'ノートパソコン',
price: 120000,
image: 'https://code-learning.com/images/vue/study-1-4/pc.png'
},
{
id: 2,
name: 'スマートフォン',
price: 80000,
image: 'https://code-learning.com/images/vue/study-1-4/sumaho.png'
},
{
id: 3,
name: 'ワイヤレスイヤホン',
price: 25000,
image: 'https://code-learning.com/images/vue/study-1-4/iyahon.png'
}
]
}
},
methods: {
// Todoリストのメソッド
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({
id: Date.now(),
text: this.newTodo,
completed: false
})
this.newTodo = ''
}
},
removeTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
}
}
})
// マウント
app.mount('#app')