Рубрика: Vue директива v-model

превращение переменных data в модель
связывание переменной c тегом

Про события и атрибуты в данном случае мы забываем.
Каждый раз подписывать событие и работать с атрибутом очень напряжно.Получается много кода.
При работе со стандартными элементами так же select нам достаточно указать эту директиву и модель, с которой будет двустороннее связывание.

По работе с этой директивой в версии

  • vue-2 (только один v-model)
  • vue-3 (можно несколько использовать v-model) есть отличие

Директива может применяться только к html-элементам

  • input
  • select
  • textarea
  • компонентам Vue

    директива v-model во Vue.js
    Vue.js

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

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

Директива v-model
PostForm

src\components\PostForm.vue 

<template>
<div class="app">
<form @submit.prevent>
<h4>Создание поста</h4>

<input 
type="text" 
v-model="post.title"
class="input"
placeholder="Название">

<input 
type="text" 
v-model:"post.body"
class="input"
placeholder="Описание">

<button 
class="btn"
вешаем слушатель события при нажатии на кнопку
@click="createPost"
>Создать</button>
</form>
</template>

<script>
export default{
data(){
return {
post{
title:'',
body:'',
}
}
}
methods:{
 createPost(event){
 this.post.id=Date.now();

 this.posts.push(newPost);
 this.title='';
 this.body='';
} 
}
</script>

<style >
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>