vue content binding (v-model)

v-model demonstration

v-model is used in the instruction input, select, textarea, checkbox, radio or other form control element to create a two-way data binding component, based on the value on the form, automatically update the value of the binding element.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input type="text"model.lazy-V = "text1" placeholder = "Please enter the name" > 
            < P > Name: text1 {{}} </ P >
            
            <input type="checkbox" v-model="text2">
            <p>是否90后：{{text2}}</p>
            
            <input type="radio" value="男" v-model="text3">
            <input type="radio" value="女" v-model="text3">
            <p>性别：{{text3}}</p>
            
            <select v-model="text4">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <p>您选择: {{ text4 }}</p>
            
            < The INPUT of the type = "the CheckBox" value = "apple" v-Model = "text5" > Apple
             < the INPUT of the type = "the CheckBox" value = "banana" v-Model = "text5" > banana
             < the INPUT of the type = "the CheckBox" value = "pear" V-Model = "text5" > pear
             < P > your favorite fruit: text5 {{}} </ P > 
        </ div > 
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                text1: " Liu Xiaotao " ,
                text2: "true",
                text3: " confidential " ,
                text4: "",
                text5: [],
            }
        })
    </script>
</html>

Input box, radio, check the drop-down box presentation case; copy run.

Modifiers

.lazy

By default, v-model synchronization input value in the input event data box, but you can add a modifier lazy, so the change into a synchronous event:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <!- <->Update on "change" rather than "input" event
            input v-model.lazy="msg" >
            <p>{{msg}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                msg: " Liu Xiaotao " ,
            }
        })
    </script>
</html>

.number

If the user wants to automatically enter a value into the type Number (original value if the conversion result is returned to the original value NaN), a modifier may be added to the v-model number to process the input values:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input v-model.number="age" type="number">
            <p>{{age}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                age: "",
            }
        })
    </script>
</html>

.trim

To automatically filtered trailing spaces input by a user, the modifier may be added to trim the v-model filter input:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input v-model.trim="input">
            <p>{{input}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                input: "",
            }
        })
    </script>
</html>

v-model principle

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input v-model="something"/>
            <!-- 等同 -->
            <input v-bind:value="something" v-on:input="something = $event.target.value"/>
            <p>{{something}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                something: "",
            }
        })
    </script>
</html>

Explanation:

$ Event refers to an event triggered by the current generation of objects.

$ Event.target dom event object refers to the current generation of trigger

$ Event.target.value value is the current value of dom

In the v-on: input method,

value => something

In: value of:

something => value

Thus, forming a closed loop, which is called two-way binding data.

Syntactic sugar to meet the rules: attribute must be a value, the method name must be: input.

Want custom components to achieve v-model, I can learn more in the following reference article.

Reference article:

https://www.runoob.com/vue2/vue-forms.html

https://www.jianshu.com/p/0d089f770ab2