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>