Vue中表单数据和过滤器的简单使用

收集表单数据

v-model的三个修饰符:

lazy:失去焦点在收集数据

number: 输入字符串转为有效数字

trim:输入首尾空格过滤

< input type="text" v-model="person.account">则v-model收集的是value值，用户输入的就是value值

< input type="checkbox">

1.没有配置value属性时，收集的是checked（布尔值）

2.配置value属性时

v-model初始值为非数组，收集的是checked(布尔值)

v-model初始值为数组，收集的是value值组成的数组

<template>
 ? ?<div id="root">
 ? ? ?<!-- prevent阻止默认行为,阻止提交信息后跳转页面 -->
 ? ? ? ?<form @submit.prevent="demo">
 ? ? ? ?<!-- demo作为标签放入input 中,这样写的目的是点击"账号："也可以选中输入框-->
 ? ? ? ?<label for="demo">账号:</label>
 ? ? ? ?<input type="text" id="demo">
 ? ? ? ?<br/><br/>
 ? ? ? ?<!-- trim作用是输入空格data不进行收集 -->
 ? ? ?  账号：<input type="text" v-model.trim="person.account">
 ? ? ?  密码：<input type="password" v-model="person.password">
 ? ? ? ?<!-- 第一个number只能输入数字类型，第二个number将输入的数字类型替换data中默认的字符类型 -->
 ? ? ?  年龄：<input type="number" v-model.number="person.age">
 ? ? ? ?<br /><br />
 ? ? ? ?<!-- value用于监测数据改变，name为属性名，value为属性值 -->
 ? ? ?  性别：
 ? ? ?  男<input type="radio" name="sex" ?v-model="person.sex" value="male">
 ? ? ?  女<input type="radio" name="sex" v-model="person.sex" value="female"><br/><br/>
 ? ? ?  爱好：
 ? ? ? ?<!-- 不加value值进行区分,勾选一个，所有选项都为true。收集的是布尔值。-->
 ? ? ?  学习：<input type="checkbox" v-model="person.hobby" value="study" ?>
 ? ? ?  读书：<input type="checkbox" v-model="person.hobby" value="game" ?>
 ? ? ?  年龄：<input type="checkbox" v-model="person.hobby" value="age " > ?<br/><br/>
 ? ? ?  所属的地址：
 ? ? ? ?<select v-model="person.city " >
 ? ? ? ? ? ?<option value="beijing">北京</option>
 ? ? ? ? ? ?<option value="guangxi">广西</option>
 ? ? ? ? ? ?<option value="shenzhen">广州</option>
 ? ? ? ? ? ?<option value="nanning">南宁</option>
 ? ? ? ?</select><br><br>
 ? ? ? ?<!-- lazy让信息输入完后,data在收集数组 -->
 ? ? ?  其他信息：<textarea v-model.lazy="person.other"></textarea>
 ? ? ? ?<br><br>
 ? ? ?  阅读并接受：<input type="checkbox" v-model="person.anniu"><a href="#">《用户协议》</a>
 ? ? ? ?<button>提交</button>
 ? </form>
 ? ?</div>
</template>
?
<script>
export default {
 ?name: 'selectMain',
 ?data () {
 ? ?return {
 ? ? ?person: {
 ? ? ? ?account: '',
 ? ? ? ?password: '',
 ? ? ? ?age: '',
 ? ? ? ?sex: 'female',
 ? ? ? ?hobby: [],
 ? ? ? ?city: '',
 ? ? ? ?other: '',
 ? ? ? ?anniu: ''
 ? ?  }
 ?  }
  },
 ?methods: {
 ? ?demo(){
 ? ? ?// 将表格的数据打印成json类型
 ? ? ?console.log(JSON.stringify(this.person));
 ?  }
  },
</script>
?

过滤器

过滤器用于样式的叠加变化

安装dayjs

npm install dayjs --save

以下代码为vue的局部过滤器，代码通过引用dayjs。分别用methods和computed实现日期格式的改变，之后用过滤器实现日期格式的改变

<template>
 ? ?<div>
 ? ? ?<!--用计算属性写出 -->
 ? ? ?<h3>现在是：{{ flashTime  }}</h3> 
 ? ? ?<!-- 用methods写出 -->
 ? ? ?<h3>现在是：{{ getflash() }}</h3>
 ? ? ?<!-- 过滤器 定义的timeFormate是一个函数，将time作为参数传给timeFormate,该函数的返回值替换{{}}里面的内容。|号为管道符-->
 ? ? ?<h3>现在是：{{ time | timeFilters | upDatetime }}</h3>
 ? ?</div>
</template>
<script scoped>
//通过npm install dayjs --save
import dayjs from 'dayjs';
export default {
 ?name: 'selectMain',
 ?data () {
 ? ?return {
 ? ? ?//设置时间
 ? ?time: 12345678945645
 ?  }
  },
//周期钩子，用于初始化time时调用flashTime()函数
 ?mounted(){
 ? ?dayjs.flashTime()
  },
 ?computed:{
 ? ?flashTime(){
 ? ? ?// format()的括号是格式，如把YYYY-MM-DD改成YYYY年MM月DD日
 ? ? ?return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
 ?  }
  },
 ?methods: {
 ? ?getflash(){
 ? ? ?return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
 ?  }
  },
 ?// 过滤器
 ?filters: {
 ? ?timeFilters(value){
 ? ? ? ?return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
 ?  },
 ? ?// 利用过滤器可以串联的性质，添加从索引0开始，只显示四位
 ? ?upDatetime(value){
 ? ? ? ?return value.slice(0,4);
 ?  }
  }
}
</script>

全局过滤器

<template>
 ? ?<div>
 ? ? ?<!-- 过滤器 定义的timeFormate是一个函数，将time作为参数传给timeFormate,该函数的返回值替换{{}}里面的内容。|号为管道符-->
 ? ? ?<h3>现在是：{{ time | timeFilters | upDatetime  }}</h3>
 ? ?</div>
</template>
<script scoped>
Vue.config.productionTip = false
// 导入第三方库,dayjs。
import dayjs from 'dayjs';
// 导入Vue设置过滤器的全局变量
import Vue from 'vue'
// 设置全局变量,upDatetime为函数名,
Vue.filter('upDatetime',function(value){
 ?return value.slice(0, 4);
})
export default {
 ?name: 'selectMain',
 ?data () {
 ? ?return {
 ? ? ?//设置时间
 ? ?time: 12345678945645
 ?  }
  },
 ?// 过滤器
 ?filters: {
 ? ?timeFilters(value){
 ? ? ? ?return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
 ?  }
  }
}
</script>