Vue.js常用指令：v-model
一、v-model指令
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。
使用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(){ // 构建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>
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决