1.v-model的基本使用 在默认情况下，v-model是在input事件中同步输入框的数据 界面改变 数据也改变 把界面上的value传过去
<div id="app"> <input type="text" v-model="message"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'2345yu' } }) </script>2.v-model的原理 背后包含两个指令
div id="app"> <input type="text" :value="message" @input="valueChange"> <input type="text" :value="message" @input="messge = $ event.target.value"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'2345yu' }, methods:{ valueChange(){ this.message = event.target.value; } } }) </script>2.v-model结合radio类型 单选圈圈
<div id="app"> <label foe="male"> //label ：没有label 只能点框 有label 可以点后面的字 <input type="radio" id="male" name="sex" value="男" v-model="sex">男 </label > <label foe="female"> <input type="radio" id="female" name="sex" value="女" v-model="sex">女 //name一样的时候 radio为单选 若绑定同样的v-model 也互斥 </label > </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'2345yu', sex:'' } }) </script>3.v-model结合checkbox类型 checkbox：复选框（单个勾选框和多个勾选框）
<div id="app"> <!--------------------checkbox单选框-----------------------------> <label for="male"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label > <!--------------------checkbox多选框-----------------------------> <label for="male"> <input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球 <input type="checkbox" id="agree" value="足球" v-model="hobbies">足球 <input type="checkbox" id="agree" value="乒乓球" v-model="hobbies">乒乓球 <input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球 </label > </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'2345yu', isAgree:false, //默认false时，未选中 hobbies:[]//选中哪个，value进来哪个 可以多个 }, }) </script>4.v-model 结合select类型使用
<div id="app"> <!--选择一个--> <select name="abc" id="1" v-model="fruit"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="西瓜">西瓜</option> <option value="太郎">太郎</option> </select> <!--选择多个 multiple 加上按住Ctrl可多选--> <select name="abc" id="2" v-model="fruits" multiple> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="西瓜">西瓜</option> <option value="太郎">太郎</option> </select> </div> </body> <script> const app=new Vue({ el:"#app", data:{ fruit:"香蕉", //下拉框默认选择香蕉 fruit:[] } }) </script>5.v-model修饰符的使用
lazy修饰符 可以让数据在失去焦点的时候或者敲击回车的时候才会更新数据 <input type="text" v-model.lazy="fruits"> number修饰符 输入框输入值默认类型为字符串 .number强行转化为数字类型 <input type="text" v-model.number="fruits"> trim修饰符 输入内容为收尾有空格，我们希望把他去除 trim可过滤两边空格 <input type="text" v-model.trim="fruits">