Vue常用特性一 表单操作

最新推荐文章于 2022-11-28 12:18:32 发布
原创 最新推荐文章于 2022-11-28 12:18:32 发布 · 239 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文详细介绍了如何在Vue中使用v-model获取单选框、复选框、下拉框和文本域的值，并讲解了表单修饰符如.number、.trim和.lazy的应用。涵盖了前端开发的基础知识，适合开发者深入理解组件状态管理。

1.获得单选框中的值

通过v-model




 



2.获取复选框中的值



通过v-model



和获取单选框中的值一样



复选框checkbox这种的组合时data中的hobby我们要定义成数组 否则无法实现多选






 3.获取下拉框和文本域中的值



通过v-model






 4.表单修饰符



.number转换成数值



.trim自动过滤用户输入的首位空白字符



.lazy将input事件切换成change事件



        .lazy修饰符延迟了同步更新属性值的时机。即将原本绑定在inpu事件的、转变为绑定在change事件上



在失去焦点 或者按下回车键是才更新






 


                

        

    


  



    

      

        

            

              
                
                  B112000
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
基于 Vue 的表单操作

				
			

			

				

					信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
				

				

					01-18
					
					506
					
				

			

		

		

			
				
表单案例
成品展示

案例解析


姓名和个人简介(text)
*功能一致 都可以选用 input 或者 textarea 都比较不错，之后通过v-model 获取和设置值都比较不错


性别
*选用单选框（radio） v设置一个 v-model 和 value 来区分男和女即可


爱好
*多选框（checkbox） 需要注意的是 设置选中状态时需要使用数组的形式 例如：hobby: [‘1’, ‘2’]


职业
*一个人可以有好多个职业 也可以只有一个职业 所以可以使用单选也可以选择用多选，正因如此

			
		

	



                

            
              



	

		

			

				
					
Vue常用特性

				
			

			

				

					weixin_43370373的博客
				

				

					07-15
					
					278
					
				

			

		

		

			
				
Vue常用特性
表单基本操作

获取单选框中的值
通过v-model

1、 两个单选框需要同时通过v-model 双向绑定 一个值 
2、 每一个单选框必须要有value属性 且value值不能一样 
3、 当某一个单选框选中的时候 v-model会将当前的value值 
    改变data中的数据
4、gender的值就是选中的值，我们只需要实时监控他的值即可

<input type="radio" id="male" value="1" v-model='gender'>
     &

			
		

	



              


  
  
              

                


	

		

			

				
					
vue表单操作

				
			

			

				

					leechoy
				

				

					01-16
					
					680
					
				

			

		

		

			
				
<!--
 * @Description: 
 * @Autor: leechoy
 * @Date: 2022-01-16 18:12:57
 * @IDE: Visual Studio Code
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.

			
		

	





	

		

			

				
					
Vue.js 表单控件操作小结

				
			

			

				

					12-11
				

			

		

		

			
				
概念说明
v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。

输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 软件开发网(mscto.com)</title>
[removed][removed]
</head>
<body

			
		

	



		

			
		



	

		

			

				
					
vue 表单操作

				
			

			

				

					weixin_30776273的博客
				

				

					11-08
					
					128
					
				

			

		

		

			
				
<form class="mian__form" @submit.prevent="submit">
  <ul>
    <li> 
      <div class="form__til">企业名称</div> 
      <div class="form__input"> 
...

			
		

	





	

		

			

				
					
Vue表单操作

				
			

			

				

					PengK_aha的博客
				

				

					11-28
					
					329
					
				

			

		

		

			
				
Vue表单操作

			
		

	





	

		

			

          精选资源
				
					
vue手写一个自定义操作的工作流

				
			

			

				

					06-15
				

			

		

		

			
				
在Vue.js框架中，手写一个自定义操作的工作流是一项挑战性的任务，但它能让你更好地理解和控制工作流的每一个细节。下面将详细讲解这个过程涉及的关键知识点。  首先，我们需要了解`Vue`的基础知识。Vue.js是一款轻...

			
		

	





	

		

			

				
					
Vue太难啦！从入门到放弃day02——vue常用特性

				
			

			

				

					小陈工的博客
				

				

					08-04
					
					1004
					
				

			

		

		

			
				
继续学习vue的第二天，已经逐渐感觉到一点难度了，距离放弃又近了一步，大佬们赐予我力量吧！

			
		

	





	

		

			

				
					
Vue常用的几个指令附完整案例

				
			

			

				

					10-17
				

			

		

		

			
				
以下是一些Vue常用的指令以及它们的作用和示例案例。  v-bind：用于绑定HTML属性到Vue实例的属性或表达式上。简写为“:”。例如，绑定“href”属性到实例属性“url”上，可以写成`:href="url"`。在完整语法中，`v-...

			
		

	





	

		

			

				
					
vue自定义表单生成器form-create使用详解

				
			

			

				

					10-16
				

			

		

		

			
				
Vue 自定义表单生成器 `form-create` 是一个强大的工具，它允许开发者根据 JSON 参数动态地生成表单，极大地简化了复杂表单的构建过程。`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据...

			
		

	





	

		

			

				
					
vue-表单操作

				
			

			

				

					gary的博客
				

				

					08-22
					
					3619
					
				

			

		

		

			
				
简单操作，与官网相同


&lt;template&gt;
    &lt;div&gt;
        &lt;h2&gt;vue form表单&lt;/h2&gt;
        &lt;!-- 复选框 --&gt;
        &lt;input type="checkbox" id="dis" v-model="dis"&gt;
    

			
		

	





	

		

			

				
					
Vue对表单的操作

				
			

			

				

					海涛高软
				

				

					11-26
					
					553
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"&...

			
		

	





	

		

			

				
					
vue简单的表单操作

				
			

			

				

					weixin_44470436的博客
				

				

					06-19
					
					464
					
				

			

		

		

			
				
VUE的表单操作
<el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
     

			
		

	





	

		

			

				
					
vue操作表单

				
			

			

				

					缚己
				

				

					01-24
					
					388
					
				

			

		

		

			
				
表单操作
操作文本框
操作文本框使用双向数据绑定来操作文本框中的内容，如下代码所示：
<div class="container">
    <form action="#" method="POST">
        <!-- 双向数据绑定，可以通过 this 获取其中的值 -->
        <label for="uname"><input v-model="uname" type="text" name="uname"></la

			
		

	





	

		

			

				
					
基于Vue的表单操作

				
			

			

				

					Yueqin0512的博客
				

				

					11-16
					
					324
					
				

			

		

		

			
				
基于Vue的表单操作

input单行文本
textarea多行文本
select下拉多选
radio单选框
checkbox多选框

示例效果如下：



input单行文本与 textarea多行文本类似，使用v-model数据绑定




select下拉
（1）单个下拉选项
在每个option中添加<option value="0"></option>，不同的value值，select 中添加<select v-model="occupation" >，data中

			
		

	





	

		

			

				
					
Vue对表单的简单的操作

				
			

			

				

					海涛高软
				

				

					12-03
					
					323
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"&gt...

			
		

	





	

		

			

				
					
vue之表单的相关操作

				
			

			

				

					hi__web的博客
				

				

					07-04
					
					170
					
				

			

		

		

			
				
vue之表单的相关操作

			
		

	





	

		

			

				
					
Vue之表单操作，自定义指令，计算属性，侦听器，过滤器

				
			

			

				

					kaieew12345的博客
				

				

					07-22
					
					484
					
				

			

		

		

			
				
1. Vue常用特性
1.1 表单操作
1. 基于Vue的表单操作
⚫ Input 单行文本
⚫ textarea 多行文本
⚫ select 下拉多选
⚫ radio 单选框
⚫ checkbox 多选框

2. 表单域修饰符
⚫ number：转化为数值
⚫ trim：去掉开始和结尾的空格
⚫ lazy : 将input事件切换为change事件
<input v-model.number="age" type="number">

1.2自定义指令
1. 为何需要自定义指令？
内置指令不满

			
		

	





	

		

			

				
					
vue-常用特性-表单操作

				
			

			

				

					gaogzhen的博客
				

				

					07-24
					
					245
					
				

			

		

		

			
				
vue-常用特性-表单操作

目录

文章目录1、表单数据绑定2、表单域修饰符***后记*** ：


内容

1、表单数据绑定


text：单行文本框


radio:单选按钮

多个radio需要绑定相同的变量
绑定的数据类型为字符串



checkbox:多选按钮

多个checkbox需要绑定相同的变量
绑定的数据类型为字符串



select>option:下拉列表

绑定的变量值类型为字符串



textarea:多行文本框


示例0-1效果图：


代码0-1：
  <!

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值