当我们用JavaScript改变Vue中v-model绑定元素的值时Vue中的数据不会随之改变

首先我们定义一个input和一个div   

<div id="app">
    <h1>{{form}}</h1>
    <input v-model="form" id="a"  type="number">
    <br>
    <div style="width:100px;height:100px; background-color:red;" id="b">
        +1
    </div>
</div>

效果如下图所示： 

 

 

 

接下来用js实现当我们点击红色div时使v-model绑定的input元素的值+1，但此时我们会发现当我们点击时input中的值会随之改变，但vue中的值并不会随之改变

<script>
new Vue({
        el:"#app",
        data(){
            return{
                form:''
            }
        }
    })
    var a=document.getElementById("a");
    var b=document.getElementById("b");
    console.log(a);console.log(b)
    //a是input ，b是红色块，点一下a的值+1
    b.onclick=function(){
        a.value=parseInt(a.value)+1;
    }
</script>

 

 

解决方法：

      我们只需要改动两处代码即可，一是创建Vue时，二是主动修改Vue中的值

var vue=new Vue({
        el:"#app",
        data(){
            return{
                form:''
            }
        }
    })

b.onclick=function(){
        a.value=parseInt(a.value)+1;
		vue.form=parseInt(vue.form)+1;
    }

 修改完成就OK了