Vue指令之`v-model`和`双向数据绑定
v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
<input type="text" v-bind:value="msg" style="width:100%;">
使用 v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定
注意: v-model 只能运用在 表单元素中
input(radio, text, address, email....) select checkbox textarea
<div class="box"> <input type="text" v-model="xx"> <input type="button" value="D" @click='show'> </div> <!-- 使用v-model双向数据绑定之后,在input标签中修改任何信息,data中的值都会改变 --> <!-- 可以在浏览器中使用检查元素=> console选项,我们最大的对象window,其中Vue vm的 实例也是window的,使用vm.xx 就可以显示信息--> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ xx:'大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!' }, methods:{ show(){ alert(this.xx); } } });