v-model原理及修饰符

1.原理

    <div id="app">
        // v-model相当于两个指令的集合(v-bind,v-on)
        // input事件：用于监听用户是否输入了东西
        <input type="text" :value="message" @input="valueChange">    
        <input type="text" :value="message" @input="message = $event.target.value">

        // 在页面控制台改变该值，data内的数据不会发生改变 
        {
    {
    message}}   
    </div>
    <script>
        const app = new Vue({
    
            el: '#app',
            data: {
    
                message: '你好呀'
            },
            methods: {
    
                valueChange(event) {
    
                    console.log("......")
                    // 获取输入内容
                    this.message = event.target.value
                }
            }
        })
    </script>

2.修饰符

    // 1.lazy修饰符的作用：由于v-model双向绑定，变化地太频繁。添加lazy后，便可以在用户输入完成回车后，数据再进行改变
    <input type="text" v-model.lazy="message"> 

    // 2.number修饰符的作用
    <input type="number" v-model.number="age">
    // typeof总是会显示string类型，因为v-model默认绑定string类型
    // 所以改成上面v-model.number就可以了 
    <h2>{
    {
    age}}——{
    {
    typeof age}}</h2>   

    // 3.trim修饰符的使用，不允许输入空格，字符串左右两边的空格，中间可以有空格
    <input type="number" v-model.trim="age">