<body>
<div id="app">
<div>{{msg}}</div>
<!-- 写法1 -->
<input type="text" v-bind:value="msg" v-on:input="handle">
<!-- 写法2 -->
<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
<!-- 写法3 -->
<input type="text" v-model="msg">
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg:'Hello Vue!'
},
methods: {
handle:function(event){
// 使用输入域中最新的数据来覆盖原来的数据
this.msg = event.target.value;
}
}
});
</script>
</body>
v-model实际上等同于 通过动态绑定value为msg 然后绑定input事件,把当前input标签的value值赋值给msg实现的
原生的绑定
<body>
<input type="text" id="username" value="" />
<p class="con"></p>
<script type="text/javascript">
var inp=document.querySelector('#username');
inp.oninput=function(){
document.querySelector(".con").innerHTML=inp.value;
}
</script>
</body>