<!-- v-model 实现数据的双向绑定 -->
<!-- v-model 只能用在表单元素中 -->
示例：
<!DOCTYPE html> <!-- v-model 实现数据的双向绑定 --> <!-- v-model 只能用在表单元素中 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h4>{{ msg1 }}</h4> <!-- v-bind 只能实现数据的单项绑定 --> <!-- : 冒号，是 v-bind的简写方式 --> <input type="text" :value="msg1" style=" 100%"> <h4>{{ msg2 }}</h4> <!-- 双向绑定 --> <input type="text" v-model="msg2" style=" 100%"> </div> </body> <script> let vm = new Vue({ // 绑定对象 el: '#app', data: { msg1: '数据单项绑定，不变', msg2: '数据双向绑定，变化' }, methods: { } }) </script> </html>