收集表单数据

收集表单数据

  • 若<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值
  • 若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性
  • 若<input type="checkbox"/>
    • 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
    • 配置了value属性
      • v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
      • v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符

  • alazy 失去焦点后再收集数据
  • bnumber 输入字符串转为有效的数字
  • ctrim 输入首尾空格过滤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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>

过滤器（Vue3 已经移除）

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

注册过滤器：

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

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

备注：

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

处理时间的库moment体积较大 dayjs轻量级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>