Рубрики
Vue project Vue директива Vue директива v-for Vue.js

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

scoped

флаг говорит о том что стили будут применимы только этому компоненту и не будут доступны извне
для корневого компонента он не нужен

src\App.js

<template>
<div>

<div class="post">
 <div><strong>Название:</strong> Пост о Javascript</div>
 <div><strong>Описание:</strong> Javascript универсальный язык программирования</div>
</div>

<div class="post">
 <div><strong>Название:</strong> Пост о Javascript</div>
 <div><strong>Описание:</strong> Javascript универсальный язык программирования</div>
</div>

<div class="post">
 <div><strong>Название:</strong> Пост о Javascript</div>
 <div><strong>Описание:</strong> Javascript универсальный язык программирования</div>
</div>

<div>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>

<script>
export default{

data(){return {likes: 0,dislikes: 5}}
methods:{ 
 addLike(){this.likes +=1;}
 addDislike(){this.dislikes +=1;}
}
</script>

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *