Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用

最新推荐文章于 2024-05-16 10:30:37 发布
最新推荐文章于 2024-05-16 10:30:37 发布
阅读量4.4k 收藏 15
点赞数 4
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/120882881
版权

一、v-model使用原理

 

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

先看一下简单的v-model使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model的基本使用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<input type="text" v-model="message" />
			<input type="text"v-model="message" />
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					message:'Nanchen'
				},
			})
		</script>
	</body>
</html>

效果如下：

 为什么要用到v-model？

使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

其使用原理：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model的使用原理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<input type="text" @input="changeValue"  :value="message" />
			<!-- <input type="text"v-model="message" /> -->
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					message:'Nanchen'
				},
				methods:{
					changeValue(e){
						console.log(e);
						this.message = e.target.value
					}
				}
			})
		</script>
	</body>
</html>

oninput 事件在用户输入时触发。

详情请参考菜鸟教程oninput

效果与上图一致。

二、v-model结合radio单选按钮使用

以前写单选按钮：

<label for="one">
	<input type="radio" name="sex" id="one" value="男"/>男
</label>
<label for="two">
	<input type="radio" name="sex" id="two" value="女"checked="checked" />女
</label>
<h1></h1>

 现在要实现双向绑定功能，就是点击哪个性别就会显示在h1里

这里就可以把name去掉，添加v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<label for="one">
				<input type="radio" id="one" value="男" v-model="sex" />男
			</label>
			<label for="two">
				<input type="radio" id="two" value="女" v-model="sex"/>女
			</label>
			<h5>{{sex}}</h5>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					sex:'男'
				},
			})
		</script>
	</body>
</html>

 三、v-model结合checkbox类型的使用

这里实现一个同意协议的小功能，先看效果：

 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h1>复选框</h1>
			<label for="one">
				<input type="checkbox"id="one" v-model="isAgree" />同意协议
			</label>
			<br>
			您选择的是：{{isAgree}}
			<br>
			<button type="button" :disabled="!isAgree">下一步</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					isAgree:true
				},
			})
		</script>
	</body>
</html>

四、v-model结合checkbox类型使用（多选）

先看实现效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<label for="hobby">
				<input type="checkbox" id="hobby" value="篮球" v-model="hobbies">篮球
			</label>
			
			<label for="hobby1">
				<input type="checkbox" id="hobby1" value="足球" v-model="hobbies">足球
			</label>
			<label for="hobby2">
				<input type="checkbox" id="hobby2" value="羽毛球" v-model="hobbies">羽毛球
			</label>
			<label for="hobby3">
				<input type="checkbox" id="hobby3" value="排球" v-model="hobbies">排球
			</label>
			<h2 v-show="hobbies.length>0">{{hobbies}}</h2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					hobbies:[]
				},
			})
		</script>
	</body>
</html>

 五、v-model结合checkbox类型使用（值的绑定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<label :for="index" v-for="(item,index) in arr" :key="index">
				<input type="checkbox" :name="'hobby'+index"  :id="index" :value="item" v-model="hobbies"  />
				{{item}}
			</label>
			<h2 v-if="hobbies.length>0">{{hobbies}}</h2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					hobbies:[],
					arr:['篮球','足球','羽毛球','排球'],
				},
			})
		</script>
	</body>
</html>

 

 

 六、v-model结合select

1.select单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select单选</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<select name="fruit" v-model="fruit">
				<option value="苹果">苹果</option>
				<option value="橘子">橘子</option>
				<option value="水蜜桃">水蜜桃</option>
				<option value="橙子">橙子</option>
			</select>
			<h3>你选择的水果有：{{fruit}}</h3>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					fruit:'苹果',
				},
			})
		</script>
	</body>
</html>

效果如下： 

 2.select多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select多选</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<select name="fruits" v-model="fruits" multiple="multiple">
				<option value="苹果">苹果</option>
				<option value="橘子">橘子</option>
				<option value="水蜜桃">水蜜桃</option>
				<option value="橙子">橙子</option>
			</select>
			<h3 v-show="fruits.length>0">你选择的水果有：{{fruits}}</h3>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					fruits:[],
				},
			})
		</script>
	</body>
</html>

效果如下：

 七、v-model的修饰符的使用

v-model的修饰符：

1、v-model.lazy         只有在input输入框发生一个blur时才触发
2、v-model.trim         将用户输入的前后的空格去掉
3、v-model.number         将用户输入的字符串转换成number

这里看这个例子 

v-model.lazy        

只有在input输入框发生一个blur时才触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
		 <h2>{{message}}</h2>
          <input type="text" v-model.lazy="message"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					message:'Nan',
					age:30,
					name:'chen'
				},
			})
		</script>
	</body>
</html>

效果如下：

v-model.number ：不可以输入字符串

 看例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		   <input type="number" v-model.number="age" />
		   <h2>{{age}}----{{typeof age}}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					message:'Nan',
					age:30,
					name:'chen'
				},
			})
		</script>
	</body>
</html>

效果如下：这里输入字符串是输入不了的

v-model.trim 

去除前后空格

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		   <input type="text" v-model.trim="name">
			<h2>{{name}}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					message:'Nan',
					age:30,
					name:'chen'
				},
			})
		</script>
	</body>
</html>

效果如下图：

Southern Wind
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
表单控件绑定：checkbox表单绑定v-model
YY的博客
11-21 1534
表单控件绑定：checkbox表单绑定v-model
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 4914
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
vue 中checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式_vue 循环复选框checkbox选择修改数值
最新发布
2401_84413180的博客
05-16 543
单选选中的id：{{rdioValue}} 单选选中的名称：{{rdioName}}多选的id:{{check}}
vue双向绑定checked属性&&JavaScript原生实现全选反选功能
qq_45701130的博客
07-05 2510
功能要求： 1、点击全选，其他相关的复选框都会被选中 2、取消全选，相关复选框都变成不选中 3、所有相关复选框都被选中后，全选框被选中 4、只要有一个相关复选框没有被选中，全选框就不被选中一、vue双向绑定checked属性实现 二、JavaScript实现全选和反选.........
【Vue3】表单数据的双向绑定：v-model
早睡早起长头发的博客
08-04 3983
一、单行文本框的绑定 二、多行文本区的绑定 三、复选框的绑定 四、单选按钮的绑定 五、下拉列表框的绑定 六、常用的两个修饰符
vue3 组件篇 Checkbox
秋来九月八
10-01 7986
实现的思路主要是依靠input type="checkbox",我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
12-02
vue.js为开发者提供了很多便利的指令，其中v-model用于表单的数据绑定很常见， 下面是最常见的例子： <input type="text" v-model="msg"> {{msg}} js里data初始化数据 [removed][removed]  ...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
单选按钮可以单独使用`v-bind:checked`绑定布尔值，或者配合`v-model`和`value`属性实现互斥选择： ```html <!-- 单独使用 --> <input type="radio" :checked="picked"> 单选按钮 var app = new Vue({ el: ...
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
`v-model` 指令在 Vue 中用于实现视图和模型之间的双向数据绑定，它使得表单元素的值能够实时反映到 Vue 实例的数据对象中，反之亦然。在本文中，我们将深入探讨 `v-model` 的基础用法和在不同表单元素上的应用。 1...
Vue v-model组件封装(类似弹窗组件)
10-15
在标准的 `v-model` 使用中，`v-model` 的默认行为是将值绑定到 `value` 属性，并监听 `input` 事件来更新数据。在自定义组件中，我们需要明确指定 `prop` 和 `event`。例如，对于一个简单的复选框组件 `base-...
v-model结合checkbox类型使用
xiaocmianju的博客
05-26 1099
1. checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。 2.checkbox结合v-model实现多选框，定义数组对象hobbies，用于存放爱好，将hobbies与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，hobbies就添加一个对象。 代码如下 <!DOCTYPE html> <html> <head> &lt...
Vue3学习之路--v-model表单
专注于 前端开发 知识分享
09-25 718
Vue基础 v-model表单
掌握vue指令之(11)v-model指令
weixin_43348064的博客
05-20 1134
123
Vue中v-model结合checkbox类型
qq_41138726的博客
11-16 323
1.单选框 <body> <div id="app"> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是：{{isAgree}}</h2> <button :disabled="!
Vue.js中的v-model表单绑定
tanxinji的博客
01-02 2739
通过使用v-model = " 属性"，可以便捷的洞悉表单中使用者选择数据的变化。作用于不同的标签会有不同的效果，都是用于捕捉用户输入的数据存放再Vue实例中。如input标签获取输入值，单选框获取单选值，复选框获取选择值。 1.作用于input标签。 ...
vue.js：v-model结合select类型
零小唬的博客
12-07 477
vue.js：v-model结合select类型
[Vue]3.双向绑定
weixin_46285081的博客
11-15 1493
什么是双向数据绑定 Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。   值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。 为什么要实现数据的双向绑定 在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说
5. v-model是什么？怎么使用？vue中标签怎么绑定事件？
04-19
5. v-model是Vue中的一个指令，通常用于双向数据绑定。在一个表单元素上使用v-model指令，它将表单元素的值与Vue组件实例中的数据进行绑定。对于不同的表单元素，v-model的使用略有不同。例如，对于text、textarea和select等表单元素，v-model用于绑定元素的value属性，对于checkbox和radio等表单元素，v-model用于绑定元素的checked属性。要绑定Vue组件实例中的一个属性，只需要在v-model后面添加一个表达式即可。例如，如果你要将表单元素的值绑定到组件实例的message属性上，你可以这样写：v-model="message"。在Vue中，可以使用v-on指令来绑定事件。例如，要监听一个按钮的click事件，你可以这样写：v-on:click="handleClick"，其中，handleClick是Vue组件实例中定义的一个方法。你也可以使用动态事件名来监听事件，例如：v-on:[eventName]="handler"，其中eventName是一个动态变量，它的值将作为事件名来绑定事件处理函数handler。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值