Директива v-for

Директива v-for
Отрисовывание n-количество постов на основании кого то массива

массив с заполненными объектами (3 объекта) которые содержат поля:

• id уникальный
• title поле название
• body тело или описание

v-for

для того чтобы работать с массивами внутри шаблона template используется эта директива в которой мы указываем один отдельно указанной иперации post и после оператора in мы указываем откуда этот пост получаем (массив posts)/ Получается цикл, внутри которого мы можем работать.
Вместо статичности теперь динамически забираем значение из post и с помощью интерполяции помещаем в шаблон

src\App.js

<template>
<div>
<div class="post" v-for="post in posts">
 <div><strong>Название:</strong> {{post.title}}</div>
 <div><strong>Описание:</strong> {{post.body}}</div>
</div>
<div>
</template>

<script>
export default{

data(){
return {
posts:[
{id:1,title: 'Javascript', body: 'Описание поста'},
{id:2,title: 'Javascript 2', body: 'Описание поста 2'},
{id:3,title: 'Javascript 3', body: 'Описание поста 3'},
{id:4,title: 'Javascript 4', body: 'Описание поста 4'},
]
}
}
methods:{ 
}
</script>

<style>
классическое обнуление
убрать отступы на странице
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.post{
 padding: 15px;
 border: 2px solid teal; темно зелёная рамка
 margin-top:15px; отступ сверху
}
</style>