Liaison d'entrée de formulaire pour Vue.js

Cette fois, je vous présente la liaison d'entrée du formulaire Vue.js. Quelles sont les précautions pour la liaison d'entrée du formulaire Vue.js. Voici un cas pratique, jetons un coup d'œil.

L'utilisation de v-model peut réaliser une liaison bidirectionnelle de la valeur de l'élément de formulaire et des données d'arrière-plan. L'utilisation spécifique est la suivante :

<!--文本-->
    <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>

　Vous pouvez ajouter des modificateurs au v-model :

　v-model.lazy -- Convertir l'entrée événement pour utiliser l'événement change pour synchronisation.

　.number -- Convertit automatiquement la valeur en valeur numérique.

　.trim -- Supprime les espaces de début et de fin dans l'entrée.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JavaScript Optimizing DOM

Demander une solution inter-domaines CORS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!