Formulareingabebindung für Vue.js

Dieses Mal präsentiere ich Ihnen die Formulareingabebindung von Vue.j. Was sind die Vorsichtsmaßnahmen für die Formulareingabebindung von Vue.j? Hier ist ein praktischer Fall.

Mit v-Modell kann eine bidirektionale Bindung des Werts des Formularelements und der Hintergrunddaten realisiert werden. Die spezifische Verwendung ist wie folgt:

<!--文本-->
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <!--checkbox多个复选框绑定(value)到数组，单个v-model绑定到布尔值即可-->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">单个复选框</label>
    <br>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    <br><br>
    <!--单选radio-->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
    <br><br>
    <!--选择框select,多选时绑定到数组,可用v-for渲染动态选项-->
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Single selected: {{ selected }}</span>
    <br><br>
    <select v-model="multiSelected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <br>
    <span>Multiple Selected: {{ multiSelected }}</span>

　

Sie können Modifikatoren zum V-Modell hinzufügen:

　v-model.lazy – Eingabe-

-Ereignis konvertieren, um -Ereignis für zu verwenden Synchronisation. change

　.number – Wandelt den Wert automatisch in einen numerischen Wert um.

　.trim – Entfernen Sie die führenden und nachgestellten Leerzeichen in der Eingabe.

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:

JavaScript Optimizing DOM

Domainübergreifende Lösung CORS anfordern

Das obige ist der detaillierte Inhalt vonFormulareingabebindung für Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!