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

2023-12-19 00:01:03
  • 收集表单数据

  • 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>

文章来源:https://blog.csdn.net/Yyds12300/article/details/135072719
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。