Работа с формами во VueJS

Текстовый Input и Vue

main.js

/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"

new Vue({
  el: "#app",
  render: h => h(App)
})

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <input v-model="name">

    <p>{{ name }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ""
      }
    }
  }
</script>

<style></style>

Для того, что бы тег "p" менялся только тогда когда мы убираем курсор с input, проставим к v-model параметр "lazy", вот так <input v-model.lazy="name">

 

Textarea и Vue

Вот так можно организовать переносы в textarea с привязкой к тегу p.

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <textarea v-model="name"></textarea>

    <p>{{ name }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ""
      }
    }
  }
</script>

<style scoped>
  textarea {
    width: 400px;
    height: 150px;
  }

  p {
    white-space: pre;
  }
</style>

 

Checkbox и Vue

Разберем на примере как во Vue работать и отслеживать chekbox.

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <input type="checkbox" value="vk" v-model="social"> ВКонтакте
    <input type="checkbox" value="instagram" v-model="social"> Instagram
    <input type="checkbox" value="facebook" v-model="social"> FaceBook

    <hr>

    <ul>
      <li v-for="s in social">{{ s }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        social: []
      }
    }
  }
</script>

<style scoped></style>

Если нужно, что бы при загрузке страницы уже какой то checkbox был установлен, то добавляем в массив social этот элемент, вот так - social: ["vk"].

 

RadioButton и Vue

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <input type="radio" value="vk" v-model="social"> ВКонтакте
    <input type="radio" value="instagram" v-model="social"> Instagram
    <input type="radio" value="facebook" v-model="social"> FaceBook

    <hr>

    <p>{{ social }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        social: ""
      }
    }
  }
</script>

<style scoped></style>

 

Select и Vue

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <select v-model="social">
      <option v-for="s in socialList">{{ s }}</option>
    </select>

    <hr>

    <p>{{ social }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        social: "instagram",
        socialList: ["vk", "instagram", "facebook"]
      }
    }
  }
</script>

<style scoped></style>

 

Числовой модификатор во Vue

Рассмотрим пример, где нам нужно в input вводить только цифры.

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <input type="text" v-model.number="age">

    <hr>

    <p>{{ age }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        age: 20
      }
    },
    watch: {
      age(value) {
        console.log(value)
        console.log(typeof(value))
      }
    }
  }
</script>

<style scoped></style>

 

Создание своего переключателя

Рассмотрим пример создания своего переключателя и осуществим это на примере передачи данных между компонентами.

main.js

/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"

new Vue({
  el: "#app",
  render: h => h(App)
})

App.vue

<template>
  <div>
    <h2>Form Inputs</h2>

    <on-off
    :switches="switches"
    @newValue="switches = $event"
    ></on-off>

    <h2 v-if="switches">Компонент активен</h2>
    <h2 v-else>Компонент не активен</h2>
  </div>
</template>

<script>
  import OnOff from "./on-off.vue"

  export default {
    components: {
      OnOff
    },
    data() {
      return {
        switches: false
      }
    }
  }
</script>

<style scoped></style>

on-off.vue

<template>
  <div>
    <button
    class="on"
    :class="{'active': switches}"
    @click="switchClick(true)"
    >On</button>

    <button
    class="off"
    :class="{'active': !switches}"
    @click="switchClick(false)"
    >Off</button>
  </div>
</template>



<script>
  export default {
    props: {
      switches: { type: Boolean },
    },
    data() {
      return {

      }
    },
    methods: {
      switchClick(newValue){
        this.$emit("newValue", newValue)
      }
    }
  }

</script>



<style scoped>
  button {
    cursor: pointer;
  }
  .on {
    background-color: aliceblue;
  }
  .off {
    background-color: aliceblue;
  }
  .on.active {
    background-color: green;
  }
  .off.active {
    background-color: red;
  }
</style>

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены