VUE课程参考---9、双向数据绑定v-model
一、总结
一句话总结：
vue中，v-model指令可以做双向绑定，也就是M（model）到V（view）的双向绑定
<div id="app"> <p>{{msg}}</p> <!--vue中，v-model指令可以做双向绑定，也就是M（model）到V（view）的双向绑定--> <input type="text" v-model:value="msg" style=" 100%;"> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '我有一只小毛驴，我永远也不骑' } }); </script>
1、双向数据绑定v-model 注意？
v-model 只能运用在 表单元素中
二、双向数据绑定v-model
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>9、双向数据绑定v-model</title> 6 </head> 7 <body> 8 <!-- 9 vue中，v-model指令可以做双向绑定，也就是M（model）到V（view）的双向绑定 10 11 注意： 12 v-model 只能运用在 表单元素中 13 14 --> 15 <div id="app"> 16 <p>{{msg}}</p> 17 <!--v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定--> 18 <!-- <input type="text" :value="msg" style=" 100%;">--> 19 20 <!--vue中，v-model指令可以做双向绑定，也就是M（model）到V（view）的双向绑定--> 21 <input type="text" v-model:value="msg" style=" 100%;"> 22 23 <!--v-model 只能运用在 表单元素中--> 24 <!-- <p v-model="msg"></p>--> 25 </div> 26 <script src="../js/vue.js"></script> 27 <script> 28 let vm = new Vue({ 29 el: '#app', 30 data: { 31 msg: '我有一只小毛驴，我永远也不骑' 32 } 33 }); 34 </script> 35 </body> 36 </html>
