v-model

我们通常会在表单中使用v-model来实现数据的双向绑定。

那么这个v-model是怎么来实现的呢？也就是说如果没有这个v-model我们怎么来实现这个双向绑定

这个时候，我们可以使用v-bind来动态input里面的value属性，把data里面的数据绑定在上面，然后又给input绑定一个input事件

这个事件要做的事，就是通过在input里面改值来改变data里面相对应数据的值，　　　　　　v-model的修饰符，有时候，我们希望回车才显示，就在后面加一个.lazy

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　v-model默认情况下绑定的数据类型事string类型，如果想要得到一个number类型，就在后面加.number

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当我们在输入的内容前输入空格和在内容后输入空格的时候，我们可以加.trim用来去掉这些空格

<div id="app">
    <input :value="mesage" @input="valuechange"/>
    <h2>{{mesage}}</h2>
</div>
        
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            mesage:"哈哈哈"
        },
        methods:{
                valuechange(event){
            this.mesage=event.target.value
            console.log(event.target.value)
            }
            }
    })
</script>