Vue-双向数据绑定VM_View-Model
VM双向数据绑定
MVVM框架，当数据发生改变的时候，视图也发生变化，当视图发生变化的时候，数据也会发生变化
只要使用 v-model 指令在表单 元素上创建双向数据绑定，v-model本质上是一个语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景做一些处理
Demo
-
<div id="vue-app"> <input type="text" v-model="message">{ {message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:"#vue-app", data:{ message:"haoyunTest" } }); </script> view层随意更改model层就会跟着变化 model层更改view层也会变化，这就是双向绑定 下拉框 <body> <div id="vue-app"> <select v-model="message"> <option>A</option> <option>B</option> <option>C</option> </select> <span>{ {message}}</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:"#vue-app", data:{ <!--默认选中--> message:"B" } }); </script> </body> 注意： <select v-model="message"> <option>A</option> <option>B</option> <option selected>C</option> </select> 比如这里selected特性是下拉框默认，但是设置了v-model就会忽略这个 如果没有在data初始化的话应该写一个disabled 让它必须选择 <body> <div id="vue-app"> <select v-model="message"> <option disabled value="">--请选择--</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>{ {message}}</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:"#vue-app", data:{ <!--默认选中--> message:"" } }); </script> </body>
上一篇：
IDEA上Java项目控制台中文乱码