一、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
原文地址：https://www.cnblogs.com/dotnet261010/p/10203290.html