VueJS

example.js

## Тогл(переключение между двумя состояниями) CSS классов

//*.html
<div id="app">
  <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Затогли меня</button>
  <p :class="{ red: active }">Иногда мне нужно быть иначе стилизованным</p>
</div>
//*.js
new Vue({
  el: '#app',
  data: {
    active: false
  }
})

## Скрытие и раскрытие

//*.html
<div id="app">
  <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'">
    Toggle Panel
  </button>
  <p v-if="show">hello</p>
</div>
//*.js
new Vue({
  el: '#app',
  data: {
    show: true
  }
})

## ===================

//*.html
<div id="app">
  <label for="textarea">Какой у тебя любимый вид шаурмы?</label>
  <textarea id="textarea" v-model="tacos"></textarea>
  <br>
  <button v-show="tacos">Дай нам знать!</button>
</div>
//*.js
new Vue({
  el: '#app',
  data() {
    return {
      tacos: ''
    }
  }
})

## Контролирование форм

//*.html
<div id="app">
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label><br>
      <input id="name" type="text" v-model="name" required/>
    </div>
    <div>
      <label for="email">Email:</label><br>
      <input id="email" type="email" v-model="email" required/>
    </div>
    <div>
      <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br>
      <textarea id="caps" v-model="caps" required></textarea>
    </div>
    <button :class="[name ? activeClass : '']" type="submit">Submit</button>
    <div>
      <h3>Response from server:</h3>
      <pre>{{ response }}</pre>
    </div>
  </form>
</div>
//*.js
new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      email: '',
      caps: '',
      response: '',
      activeClass: 'active'
    }
  },
  methods: {
    submitForm() {
      axios.post('//jsonplaceholder.typicode.com/posts', {
        name: this.name,
        email: this.email,
        caps: this.caps
      }).then(response => {
        this.response = JSON.stringify(response, null, 2)
      })
    }
  }
})