今天小编给大家分享一下vue.js中v-model指令如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、v-mode
今天小编给大家分享一下vue.js中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指令实现全选的功能：
<!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指令如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。
--结束END--
本文标题: Vue.js中v-model指令如何使用
本文链接: https://www.lsjlt.com/news/324670.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0