Home > Web Front-end > JS Tutorial > body text

Form input binding for Vue.js

php中世界最好的语言
Release: 2018-03-19 16:25:26
Original
2062 people have browsed it

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>
Copy after login

  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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template