Vue.js常用指令：v-model
Posted .NET开发菜鸟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js常用指令：v-model相关的知识，希望对你有一定的参考价值。
一、v-model指令
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。
代码示例如下：
<!DOCTYPE html> <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>v-model指令</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 构建vue实例 new Vue({ el:"#my", data:{ inputValue:"hello world", chkState:true, //默认为true chkArray:["1"], //处理成组的复选框需要定义一个数组，对应每个CheckBox的value值,这里默认第二个选中 chkLists:[{displayName:"科普读物",value:"0"}, {displayName:"中小学教材",value:"1"}, {displayName:"计算机科学",value:"2"}], rdoCheck:"1", // 动态处理radio radioLists:[{name:"Gender",value:"1",displayName:"男"}, {name:"Gender",value:"2",displayName:"女"}], sectionValue:"香蕉", // 没有value值，默认值就是name的值 sectionValue1:"0", optionLists:[{value:"0",displayName:"苹果"}, {value:"1",displayName:"香蕉"}, {value:"2",displayName:"葡萄"}] }, // 方法 methods:{ }, filters:{ toShowCheckBoxState:function(value){ return value==true?"选中":"未选中" } } }) } </script> </head> <body> <div id="my"> <!--表单输入框 当inputValue的值为123的时候禁止输入--> <input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}} <!--复选框 v-model 当前的状态:true或者false--> <div> <input type="checkbox" v-model="chkState">当前选中状态:{{chkState | toShowCheckBoxState}} </div> <!--多个复选框 组 静态显示--> <div> <input type="checkbox" v-model="chkArray" value="0">唱歌 <input type="checkbox" v-model="chkArray" value="1">跳舞 <input type="checkbox" v-model="chkArray" value="2">打篮球 <p>当前选中的value值:{{chkArray}}</p> </div> <!--复选框 动态显示--> <div> <ul> <li v-for="list in chkLists"> <input type="checkbox" v-model="chkArray" :value="list.value">{{list.displayName}} </li> </ul> </div> <!--单选框 静态显示 --> <div> <input type="radio" v-model="rdoCheck" name="Gender" value="1">男 <input type="radio" v-model="rdoCheck" name="Gender" value="2">女 <p>{{rdoCheck}}</p> </div> <!--单选框 动态显示--> <div> <ul> <li v-for="list in radioLists"> <input type="radio" v-model="rdoCheck" :name="list.name" :value="list.value">{{list.displayName}} </li> </ul> <p>{{rdoCheck}}</p> </div> <!--下拉框 静态显示 --> <div> <select v-model="sectionValue"> <option>苹果</option> <option>香蕉</option> <option>葡萄</option> </select> <p>{{sectionValue}}</p> </div> <!--下拉框 静态显示 --> <div> <select v-model="sectionValue1"> <option value="0">苹果</option> <option value="1">香蕉</option> <option value="2">葡萄</option> </select> <p>{{sectionValue1}}</p> </div> <!--下拉框 静态显示 --> <div> <select v-model="sectionValue1"> <option v-for="list in optionLists" :value="list.value">{{list.displayName}}</option> </select> <p>{{sectionValue1}}</p> </div> </div> </body> </html>
二、v-model指令实例
下面代码利用v-model指令实现全选的功能：
<!DOCTYPE html> <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>v-model指令</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload = function(){ var vm =new Vue({ el:‘#my‘, data:{ checkAll: {name:‘全选‘,check:false}, lists:[{name:‘小米‘,check:true}, {name:‘华为‘,check:false}, {name:‘苹果‘,check:false}, {name:‘中兴‘,check:false}, {name:‘OPPO‘,check:false}] }, methods: { checkAllChange:function(){ vm.lists.forEach(function(item){ item.check = vm.checkAll.check; }); }, curChange:function(){ //true的状态 var curTure = this.lists.filter(function(item){ return item.check ==true; }); curTure.length == this.lists.length ? this.checkAll.check = true : this.checkAll.check = false ; } } }) } </script> </head> <body> <div id=‘my‘> <input type="checkbox" v-model="checkAll.check" @change="checkAllChange()"> <label>{{checkAll.name}} {{checkAll.check}}</label> <ul> <li v-for="list in lists"> <input type="checkbox" v-model="list.check" @change="curChange()"> <label>{{list.name}} {{list.check}}</label> </li> </ul> </div> </body> </html>
以上是关于Vue.js常用指令：v-model的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js 源码分析(二十二) 指令篇 v-model指令详解