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

Добавление динамических классов в Vue

<template>
<тег v-bind:class="{НазваниеКласса,Код}">
</template>

Код
условие bool, по которому будет добавляться этот класс

Рубрики
Vue директива v-bind Vue компонент.script Vue компонент.script.data Vue компонент.script.props

Передаём переменную data дочерней компоненте Vue

  • Родительская компонента содержит переменную в data
<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>

<script>
export default{
data(){
 return {
  ИмяОбъекта: Значение
 }
}
}
</script>
  • Дочерняя компонента comp
    пропсы нельзя изменять
<script>
export default{
props:{
ИмяПропса:{
 type:Array,
 requered:true,
}
}
}
</script>
Рубрики
Vue директива Vue.js

Vue директива v-on

  • структура использования директивы в теге как атрибут
    v-on: ИмяСобытия=<<ИмяФункции>>

Эта директива парсится
в момент наступления события ИмяСобытия

сокращенная запись использования
@: ИмяСобытия=<<ИмяФункции>>

  • Использование директивы v-on в компоненте
    повесить слушатель события и связать с кнопками
<template>
<div>
<button v-on:click="addLike">Likes</button>
<button v-on:click="addDislike">Dislikes</button>
</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>
</style>