vue-常用特性-表单操作

最新推荐文章于 2023-06-10 23:43:15 发布

gaog2zh

最新推荐文章于 2023-06-10 23:43:15 发布

阅读量176

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/gaogzhen/article/details/107571478

版权

vue 专栏收录该内容

42 篇文章 10 订阅

订阅专栏

vue-常用特性-表单操作

文章目录

1、表单数据绑定
2、表单域修饰符
- ***后记*** ：

内容

1、表单数据绑定

text：单行文本框
radio:单选按钮
- 多个radio需要绑定相同的变量
- 绑定的数据类型为字符串
checkbox:多选按钮
- 多个checkbox需要绑定相同的变量
- 绑定的数据类型为字符串
select>option:下拉列表
- 绑定的变量值类型为字符串
textarea:多行文本框
示例0-1效果图：

代码0-1：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>01_form</title>
  	<script src="../assets/js/vue.js"></script>
  	<style>
  		#app div {
  			margin-bottom: 15px;
  		}
  		#app div span {
  			margin-right: 20px;
  		}
  	</style>
  </head>
  <body>
  <div id="app">
  	<div>
  		<span>&emsp;用户名：</span>
  		<span><input type="text" v-model="uname"></span>
  	</div>
  	<div>
  		<span>&emsp;&emsp;性别：</span>
  		<span>
  			<input type="radio" value="0" v-model="gender">女
  			<input type="radio" value="1" v-model="gender">男
  		</span>
  	</div>
  	<div>
  		<span>&emsp;&emsp;爱好：</span>
  		<span>
  			<input type="checkbox" value="0" v-model="hobbies">跑步
  			<input type="checkbox" value="1" v-model="hobbies">旅行
  			<input type="checkbox" value="2" v-model="hobbies">敲代码
  		</span>
  	</div>
  	<div>
  		<span>&emsp;&emsp;学历：</span>
  		<span>
  			<select v-model="education">
  				<option value="0">请选择学历...</option>
  				<option value="1">小学</option>
  				<option value="2">初中</option>
  				<option value="3">高中</option>
  				<option value="4">学士</option>
  				<option value="5">硕士</option>
  				<option value="6">博士</option>
  			</select>
  		</span>
  	</div>
  	<div>
  		<span>个人简介：</span>
  		<span><textarea  cols="30" rows="10" v-model="introduction"></textarea></span>
  	</div>
  	<input type="button" value="提交" @click="check()">
  </div>

  <script>
   const app = new Vue({
  	el: '#app',
  	data: {
  	   uname: '' ,
  	   gender: 0,
  	   hobbies: [],
  	   education: '0',
  	   introduction: ''
  	},
  	methods:{
  	   check() {
  		   console.log(this.uname);
  		   console.log(this.gender);
  		   console.log(this.hobbies);
  		   console.log(this.education);
  		   console.log(this.introduction);
  	   } 
  	}
   });
   </script>
  </body>
  </html>

2、表单域修饰符

number:转化为数字
trim:去除前后空格
lazy：把input事件转化为change事件

格式

  <input type="text" v-model.修饰符="变量" >

解析：
- number修饰符：文本框默认值类型为字符串，但是有时候我们需要输入数字，相应拿到的也是数字类型，就不用转化直接进行运算。
- trim:对应登录注册功能中用户名校验，我们一般需要去除前后空格。

后记：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-常用特性-表单操作

vue-常用特性-表单操作目录文章目录1、表单数据绑定2、表单域修饰符***后记*** ：内容1、表单数据绑定text：单行文本框radio:单选按钮多个radio需要绑定相同的变量绑定的数据类型为字符串checkbox:多选按钮多个checkbox需要绑定相同的变量绑定的数据类型为字符串select>option:下拉列表绑定的变量值类型为字符串textarea:多行文本框示例0-1效果图：代码0-1： <!
复制链接

扫一扫