V-model principle and modifier

1. principle

    <div id="app">
        // v-model Equivalent to a set of two instructions (v-bind,v-on)
        // input event ： Used to monitor whether the user has entered something 
        <input type="text" :value="message" @input="valueChange">    
        <input type="text" :value="message" @input="message = $event.target.value">

        //  Change the value in the page console ,data The data in will not change  
        {
    {
    message}}   
    </div>
    <script>
        const app = new Vue({
    
            el: '#app',
            data: {
    
                message: ' How are you? '
            },
            methods: {
    
                valueChange(event) {
    
                    console.log("......")
                    //  Get input 
                    this.message = event.target.value
                }
            }
        })
    </script>

2. Modifier

    // 1.lazy The function of the modifier ： because v-model Two way binding , Change too often . add to lazy after , You can enter after the user completes the input , Change the data again 
    <input type="text" v-model.lazy="message"> 

    // 2.number The function of the modifier 
    <input type="number" v-model.number="age">
    // typeof Always show string type , because v-model The default binding string type 
    //  So change it to the top v-model.number That's all right.  
    <h2>{
    {
    age}}——{
    {
    typeof age}}</h2>   

    // 3.trim Use of modifiers , Spaces are not allowed , The space on the left and right sides of the string , There can be spaces in the middle 
    <input type="number" v-model.trim="age">