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>

 

相关文章