联系我

框架

Vue.js

Vue2 / Vue3 常用写法与校验相关片段。 — 共 8 条

共 8 条代码片段

A. 用法类

异步回调

this.$nextTick(() => {
  // DOM 更新后执行
});

更新数据

this.$set(this.datas, "field", content);

清除错误验证

this.$refs.xxx.clearValidate(["xxx"]);

自定义验证

_checkCustom(rule, value, callback) {
  if (!this.$base.checkMobile(value)) {
    callback(new Error("手机号格式不正确"));
  } else {
    callback();
  }
}

Vue3 ref / reactive

import { ref, reactive } from "vue";

const count = ref(0);
const state = reactive({ name: "", list: [] });

count.value++;
state.name = "vic";

Vue3 watch / computed

import { ref, watch, computed } from "vue";

const keyword = ref("");
const list = ref([]);

const filtered = computed(() =>
  list.value.filter((item) => item.includes(keyword.value))
);

watch(keyword, (val) => {
  console.log("keyword:", val);
});

Vue3 生命周期

import { onMounted, onUnmounted } from "vue";

onMounted(() => {
  // 挂载完成
});

onUnmounted(() => {
  // 卸载清理
});

v-model 与修饰符

<input v-model.trim="name" />
<input v-model.number="age" />
<input v-model.lazy="email" />