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.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表单操作

				
			

			

				

					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 表单操作

				
			

			

				

					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-表单操作

				
			

			

				

					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：
  <!

			
		

	





	

		

			

				
					
Vue常用特性（表单操作）

				
			

			

				

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

				

					02-12
					
					1478
					
				

			

		

		

			
				
祝各位新年快乐，开开心心每一天
表单操作
作用：  用户交互
应用场景：邮件传输

常用表单的数据类型

Input 单行文本
使用 v-model 进行双向数据绑定



textarea 多行文本
使用 v-model 尽享双向数据绑定



select 下拉多选
为每个选项设置一个 value 并给 select  设置 v-model 的值 （可以单选也可以多选）
如果想要多选 需要为 select 设置 multiple=“true” 或者 直接写 multiple



radio 单选框
分

			
		

	





	

		

			

				
					
Vue:表单基本操作

				
			

			

				

					qq_41421033的博客
				

				

					10-04
					
					292
					
				

			

		

		

			
				
表单基本操作


获取单选框中的值

通过v-model

 	<!-- 
		1、 两个单选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个单选框必须要有value属性  且value 值不能一样 
		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据

		gender 的值就是选中的值，我们只需要实时监控他的值就可以了
	-->
   <input type="radio" id="male" val

			
		

	





	

		

			

				
					
vue-常用表单操作

				
			

			

				

					qq_49571987的博客
				

				

					10-29
					
					389
					
				

			

		

		

			
				
###表单元素
1、单选框
<body>
    <div id="box">
        <!-- radio:需要出现单选情况，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定 -->
        性别：
        <div>
            <input type="radio" v-model="sex" value="男"> 男
            <input 

			
		

	





	

		

			

				
					
Vue.js之表单的基本操作

				
			

			

				

					weixin_44827643的博客
				

				

					07-12
					
					1307
					
				

			

		

		

			
				
本文主要介绍如何利用Vue.js进行表单的基本操作，核心是利用v-model对各个表单的元素值进行双向绑定。效果如图：文本框即是上面的姓名框,通过给文本框双向绑定name变量，即可实现效果。单选按钮即为上面的性别选项，由于单选按钮仅需选择一个选项，故定义的gender变量以单个数据进行赋值。为所有的相应单选按钮的值双向绑定gender变量多选按钮即为上面的爱好选项，由于多选按钮可以选择多个选项，故定义的hobby变量以数组的形式进行赋值。为所有的相应多选按钮双向绑定hobby变量。下拉选项同时具有单选按钮和

			
		

	





	

		

			

				
					
VUE值、表单操作语法

				
			

			

				

					zhaohan___的博客
				

				

					11-16
					
					882
					
				

			

		

		

			
				
文章目录值操作语法Mustache 胡须语法v-oncev-for 遍历数据v-html 直接当作html加载进入v-pre 不经过编译直接添加进入dom节点v-cloak 斗篷动态绑定语法v-bind 绑定vue值和属性动态绑定并切换classv-on用法生成列表并且点击切换颜色
值操作语法
Mustache 胡须语法
双大括号引用vue变量中的变量值
message可能是data中的值也可能是计算属性方法
{{message}} 单取值
{{message+message}} 运算
{{message}

			
		

	





	

		

			

				
					
Vue常用指令深度解析与学习指南

				
			

			

				

					
				

			

		

		

			
				
组件系统是Vue.js核心特性之一，它允许我们通过HTML标签的自定义语法来扩展HTML。在文件集中的知识涵盖了：  - 创建组件实例 - 组件选项 - 组件间通信 - 动态组件 & 异步组件  ### Vue.js 单文件组件  单文件组件（`...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值