Vue.js中v-model指令的用法介绍
更新时间：2022年03月14日 09:54:54 作者：.NET开发菜鸟
这篇文章介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue项目的网络请求代理到封装步骤,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vuex模块化和命名空间namespaced的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
vue3 el-table 如何通过深度选择器::v-deep修改组件内部样式(默认样式)
在Vue3中,通过使用深度选择器::v-deep可以有效修改element-plus中el-table组件的内部样式,这种方法允许开发者覆盖默认的样式,实现自定义的视觉效果,本文给大家介绍vue3 el-table 通过深度选择器::v-deep修改组件内部样式,感兴趣的朋友一起看看吧2024-10-10
watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的No认知时，也需要执行函数2023-01-01
这篇文章主要介绍了如何让vue长列表快速加载，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了VUE Elemen-ui之穿梭框使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
vue中实现当前时间echarts图表时间轴动态的数据(实例代码)
这篇文章主要介绍了vue中实现当前时间echarts图表时间轴动态的数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-10-10
解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no
这篇文章主要给大家介绍了关于如何解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)的相关资料,文中通过代码将解决办法介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue中组件的过渡动画，并通过实例代码给大家介绍了过渡动画的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
最新评论