Vue.js Ereignisbindungsform-Ereignisbindung

Dieses Mal zeige ich Ihnen die Vue.js-Ereignisbindung – Formular-Ereignisbindung. Was sind die Vorsichtsmaßnahmen für die Verwendung der Vue.js-Ereignisbindung – Formular-Ereignisbindung am Fall.

Eingabe

<template>
  <div id="myapp">
    <!--
    input的事件绑定与普通的事件绑定的区别:
    input是双向绑定
    事件绑定采用v-model
    -->
    <input type="text" v-model="myVal">
    <!--将表单的内容显示出来-->
    {{myVal}}  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {        myVal: &#39;&#39;
      }
    }
  }</script>

Modifikator: .lazy Wenn Sie auf der Tastatur die Eingabetaste drücken, werden die Daten als angezeigt aktualisiert

<input type="text" v-model.lazy="myVal">
......

Andere Modifikatoren

.number – Zeichen eingeben Zeichenfolge zum Konvertieren in Zahlen, andernfalls .number
hinzufügen.trim – Eingabetaste das erste und das letzte Zeichen Leerzeichenfilter

Eingabe – Kontrollkästchen Kontrollkästchen Mehrfachauswahl

oder mit V-Modell binden, die Einstellungen zeigen auf myVal, myVal sollte auf eingestellt sein ein Array, der in das Array eingefügte Wert wird aus dem Wert der Eingabe erhalten.

<template>
  <div id="myapp">
    {{myVal}}    <br><!--多选-->
    <input type="checkbox" name="" value="apple" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="banana" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="orange" v-model="myVal">
    <label >apple</label>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {        myVal: []
      }
    }
  }</script>

Eingabe - Radio Radio

<template>
  <div id="myapp">
    {{myVal}}    <br>
    <!--select-->
    <!--
    为什么默认选种是空的?
    刚开始时,myVal是空的,因为是双向绑定,option里面是没有当前的myVal,所以在这个组件里面是没有被选中的.如果把myVal刚开始设为0 (myVal: &#39;0&#39;),则开始默认为apple.
    -->
    <select name="" id="" v-model="myVal">
      <option v-for="item in options" :value="item.value">{{ item.name }}</option>
    </select>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {//        默认值为0,如果设为&#39;&#39;空的话,初始化没有默认选种
        myVal: &#39;0&#39;,        options: [
          {            name: &#39;apple&#39;,            value: &#39;0&#39;
          },
          {            name: &#39;banana&#39;,            value: &#39;1&#39;
          },
          {            name: &#39;orange&#39;,            value: &#39;2&#39;
          }
        ]
      }
    }
  }</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Synchronisierte Aktualisierungsmethode für Listendaten in Vue.js

Listenrendering v in Vue.js -für Array-Objekt-Unterkomponente

Das obige ist der detaillierte Inhalt vonVue.js Ereignisbindungsform-Ereignisbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!