vue.js v-model,vue中:model
这篇文章介绍了vue。j中v型车指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、v-model指令
v型车用来获取表单元素的值。对应投入输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。
使用v型车可以在表单控件或者组件上创建双向绑定。
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题v模型指令/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
输入值："你好，世界",
chkState:true，//默认为真实的
chkArray:[1]，//处理成组的复选框需要定义一个数组，对应每个检验盒的价值值，这里默认第二个选中
chkLists:[{displayName:科普读物，值："0"},
{显示名称：中小学教材，值："1"},
{显示名称：计算机科学，值： 2}],
RDO检查：“1”，
//动态处理收音机
放射科医师：[{名称：性别，值： 1 ,显示名称：男},
{名称：性别，值： 2 ,显示名称：女}],
sectionValue:香蕉, //没有价值值，默认值就是名字的值
部分值1:“0”，
选项列表：[{值："0",显示名称：苹果},
{值： 1 ,显示名称：香蕉},
{值： 2 ,显示名称：葡萄}]
},
//方法
方法：{
},
过滤器：{
toShowCheckBoxState:函数（值){
返回值==真？选中:未选中
}
}
})
}
/脚本
/头
身体
div id=我的
！-表单输入框当输入值的值为123的时候禁止输入-
输入类型= text v-model=输入值:禁用=输入值==123 {输入值} }
！-复选框v型车当前的状态：正确或者错误-
差异
输入类型=复选框v-model=chkState 当前选中状态：{ { chkState toShowCheckBoxState } }
/div
！-多个复选框组静态显示-
差异
输入类型=复选框v-model=chkArray 值=0 唱歌
输入类型=复选框v-model=chkArray 值=1 跳舞
输入类型=复选框v-model=chkArray 值=2 打篮球
p当前选中的价值值：{{chkArray}}/p
/div
！-复选框动态显示-
差异
保险商实验所
李代表中国中的列表
输入类型= checkbox v-model= chkArray :值= list。值“{ list。显示名称} }
/李
/ul
/div
！-单选框静态显示-
差异
输入类型= radio v-model= RDO检查 name= Gender value= 1 男
输入类型= radio v-model= RDO检查 name= Gender value= 2 女
p{{rdoCheck}}/p
/div
！-单选框动态显示-
差异
保险商实验所
李v-for=列表中的放射科医生
输入类型= radio v-model= RDO检查:name= list。 name :value= list。值“{ list。显示名称} }
/李
/ul
p{{rdoCheck}}/p
/div
！-下拉框静态显示-
差异
选择垂直模型=sectionValue
选择权苹果/选项
选择权香蕉/选项
选择权葡萄/选项
/选择
p{{sectionValue}}/p
/div
！-下拉框静态显示-
差异
选择垂直模型=sectionValue1
选项值="0"苹果/选项
选项值=1 香蕉/选项
选项值=2 葡萄/选项
/选择
p{{sectionValue1}}/p
/div
！-下拉框静态显示-
差异
选择垂直模型=sectionValue1
选项选项列表中的v-for= list :value= list。值“{列表。显示名称} }/选项
/选择
p{{sectionValue1}}/p
/div
/div
/body
/html
二、v-model指令实例
下面代码利用v型车指令实现全选的功能：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题v模型指令/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
var vm=new Vue({
艾尔："#我的",
数据：{
checkAll: {name:全选，检查：false}，
列表：[{name:小米，check:true}，
{姓名：华为，检查：false}，
{姓名：苹果，检查：false}，
{姓名：中兴，检查：false}，
{name:OPPO ，check:false}]
},
方法：{
checkAllChange:function(){
vm.lists.forEach(函数（项目){
项目。check=VM。全部检查。检查；
});
},
curChange:function(){
//真的状态
var curTure=this。列表。过滤器(功能(项目){
返回item.check==true
});
文化。长度==this。列表。长度？这个。全部检查。check=true:这个。全部检查。check=false
}
}
})
}
/脚本
/头
身体
div id=我的
输入类型=复选框 v-model=全部选中。check @ change= check all change()
标签{ {全部选中。name } } { {全部选中。检查} }/标签
保险商实验所
李v-for=列表中的列表
输入类型=复选框 v-model=列表。请检查 @ change= ur change()
标签{ { list。name } } { { list。检查} }/标签
/李
/ul
/div
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。