Form input binding for Vue.js

This time I will bring you Vue.js form input binding. What are the precautions for Vue.js form input binding. Here is a practical case, let’s take a look.

Using v-model can realize two-way binding between the value of the form element and the background data. The specific usage is as follows:

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

　 Modifiers can be added to v-model:

v-model.lazy -- Convert the input event to use the change event for synchronization.

　.number -- Automatically convert the value to a numeric value.

　.trim -- Remove the leading and trailing spaces of the input.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JavaScript Optimizing DOM

##Request cross-domain solution CORS

The above is the detailed content of Form input binding for Vue.js. For more information, please follow other related articles on the PHP Chinese website!