Vue 表单数据

最新推荐文章于 2025-03-13 11:57:42 发布

半夏_2021

最新推荐文章于 2025-03-13 11:57:42 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/fd2025/article/details/125308906

Vue 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了Vue.js中v-model的用法，用于收集表单数据，包括文本、密码、数字、单选、多选及懒加载、数字转换和空格过滤等场景。同时，讲解了Vue.js的过滤器功能，包括全局和局部过滤器的注册与使用，以及如何处理和格式化时间。通过示例代码展示了如何在实际应用中实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

若 , 则 v-model 收集的是 value值，用户输入的内容就是value值。
若则v-model 收集的是 value 值，且要给标签配置value 属性
若
- 没有配置value属性，那么收集的是 checked属性
- 配置了value属性
  - v-model 的初始值是非数组，那么收集的就是checked
  - v-model 的初始值是数组，那么收集的就是value组成的数组
v-model 的三个修饰符
- lazy 失去焦点后再收集数据
- number 输入字符串转为有效的数字
- trim 输入首尾空格过滤

<title>收集表单数据</title>

<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <form @submit.prevent="demo">
    账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
    密码：<input type="password" v-model="userInfo.password"> <br /><br />
    年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
    性别：
    男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
    爱好：
    学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
    <br /><br />
    所属校区
    <select v-model="userInfo.city">
      <option value="">请选择校区</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">成都</option>
    </select>
    <br/><br/>
    其他信息：
    <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
    <input type="checkbox" v-model="userInfo.agree">阅读并接受
    <a href="https://www.yuque.com/cessstudy">《用户协议》</a>
    <button>提交</button>
  </form>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el: '#root',
    data: {
      userInfo: {
        account: '',
        password: '',
        age: 18,
        sex: 'female',
        hobby: [],
        city: 'beijing',
        other: '',
        agree: ''
      }
    },
    methods: {
      demo() {
        console.log(JSON.stringify(this.userInfo))
      }
    }
  })
</script>

2.过滤器(Vue3已经移除了)
定义: 对要显示的数据进行特定格式化后再显示

注册过滤器

Vue.filter(name,callback) 全局过滤器
new Vue{filter:{}} 局部过滤器

使用过滤器：{{xxx|过滤器名} 或 v-bind:属性= “xxx” | 过滤器名}

备注：

过滤器可以接收额外参数，多个过滤器也可以串联
并没有改变原本的数据，而是产生新的对应的数据

处理时间的库 moment 体积较大 dayjs 强良机

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>时间</h2>
            <h3>当前时间戳：{{time}}</h3>
            <h3>转换后时间：{{time | timeFormater()}}</h3>
			<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
			<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,11)
		})
		new Vue({
            el:'#root',
            data:{
                time:1626750147900,
            },
			// 局部过滤器
            filters:{
                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
                    return dayjs(value).format(str)
                }
            }
        })
	</script>
</html