2020-11-03在vue项目中利用计算属性和监听属性同时监听多条数据(登录时身份验证)

最新推荐文章于 2023-02-06 15:51:05 发布

置顶 LYM2020521

最新推荐文章于 2023-02-06 15:51:05 发布

阅读量314

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/LYM2020521/article/details/109471825

版权

在vue项目中利用计算属性和监听属性同时监听多条数据(登录时身份验证)

<template>
  <!-- 手机号 -->
        <my-input
          onpaste="return false"
          type="tel"
          v-model="mobile"
          clearable
          :left-icon="leftIcon"
          :placeholder="
            active == 1 ? '请输入联通/移动/电信手机号码' : '请输入联通手机号码'
          "
        />
        <!-- 密码 -->
        <my-input
          onpaste="return false"
          type="password"
          v-if="active == 2"
          v-model="password"
          clearable
          left-icon="pwd"
          right-icon="eye"
          placeholder="请输入6位服务密码"
        />
        <!-- 验证码 -->
        <my-input
          type="tel"
          v-if="active == 1"
          v-model="sms"
          left-icon="sms"
          placeholder="请输入验证码"
        >
</template>

<script>
import { Dialog, Toast, Input } from "woui-mobile";
import MyDialog from "@/components/Dialog";
import myInput from "@/components/Input";
import api from "@/api";
import Vue from "vue";
export default {
  data: function() {
    return {
      mobilePattern: /^1[3|4|5|7|8][0-9]{9}$/, //手机号校验
      passwordPattern: /^\d{6}$/, //密码校验
      // passwordPattern: /^.\w{6,16}$/, //密码校验
      smsPattern: /^\d{6}$/,
      mobile: "",
      password: "",
      sms: "",
    };
  },
  components: {
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    myInput
  },
  computed: {
    changeData() {
      const { mobile, password, sms } = this;
      return {
        mobile,
        password,
        sms
      };
    }
  },
  watch: {
    changeData: function(newValue) {
      if (
        this.mobilePattern.test(newValue.mobile) &&
        this.passwordPattern.test(newValue.password)
      ) {
        this.btnDisabled = true;
      } else if (
        this.mobilePattern.test(newValue.mobile) &&
        this.smsPattern.test(newValue.sms)
      ) {
        this.btnDisabled = true;
      } else {
        this.btnDisabled = false;
      }
    }
  },
  created() {},
  mounted() {},
  methods:{
  }
};
</script>