pig_pig32的博客

因为枚举的遍历比较特殊，会把枚举的名称和值一起输出，所以在使用时，我们要根据自己的使用场景转换成自己需要的类型。

HTML最近看到vue有直接实现拖动的小组件，试了试，感觉还挺简单的，就可以实现元素的拖动，直接数组的元素的位置移动。 <div> <SlickList v-model="items" axis="xy" :distance="5" style" display: flex; gap: 10px;flex-wrap: wrap;"> <SlickItem v-for="(item, index) in items" :key="index

arr = [ { id: 1, name: '张一', age: 20 }, { id: 1, name: '张一', age: 20 }, { id: 2, name: '张二', age: 20 }, { id: 3, name: '张三', age: 20 }, ];方法一通过forEach再通过some方法判断数组是否包含当前对象id，不包含则添加 some() { let some: any = []; this.arr.forE..

Provide / Inject的定义Provide / Inject： 父级组件向其所有子孙后代注入一个依赖（@Provide ），不论组件层次有多深，都可以通过（@Inject）接收父级组件传过来的任何类型的值，并在其上下游关系成立的时间里始终生效。最近在写项目的时候，常需要对多个子组件的表单进行编辑/查看模式的切换，一开始用Prop进行传值进行控制，当组件多的时候使用Prop还是挺繁琐的，这样的话，使用 Provide / Inject就可以快速实现功能的切换父组件<template&g

实现效果相关使用属性 // clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； // clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； // element.offsetTop 指 element距离上方或上层控件的位置，整型，单位像素。 // element.offsetLeft 指 element距离左方或上层控件的位置，整型，单位像素。 // element.offsetWidth 指 element控件自身的宽度，整型，

今天在写个人项目功能开发中，在给对象属性赋值过程中总是报一些莫名其妙的错误，经过调试发现在赋值的过程中有些属性为null或者undefined的时候会报错。具体用法如下：?.用法当?前的属性或者值为真时返回当前属性的值，否则返回null或者undefined//a?.b ---> a && a.b ? a.b : undefinedthis.toDoListEditData.name = this.person?.name;//相当于this.person&&

forEach let arr: any[] = [1, 2, 3, 4]; arr.forEach((item,index)=>{ console.log('值:',item,'索引:',index); });includes let arr: any[] = [1, 2, 3, 4]; let result = arr.includes(1, 2); //第一个参数为搜索的元素，第二个是开始搜索的位置,返回值是true或false

最近通过对对象相关知识的深入学习，我发现对对象的遍历主要分为两种情况，一种是在页面中遍历，另外一种是在方法中遍历对象，现在我们就从这两种情况分别来遍历对象获取对象的key和value。情况一：在页面中遍历对象获取对象的键和值定义一个变量 obj:object={a:1,b:2,c:3};//用于在页面中调用在页面中使用v-for遍历出对象的key和value <div> <h1> 获取对象的key和value </h1

在Vue.js中Filter过滤器是什么在Vue.js中Filter常用于拦截数据，对数据进行进一步处理和展示，分为全局过滤器和局部过滤器，在网页开发中，最常用到的是对时间的处理，比如我们创建个时间，new Date（）时间是中国标准时间（Tue Jul 13 2021 16:50:43 GMT+0800 (中国标准时间)）这样我们就可以通过使用过滤器处理展示为我们日常看到的时间格式：2021-07-13 16:50:43，说到底，过滤器就是拦截数据对数据进行再次处理并返回数据，在Vue.js中常在

实现效果实现思路通过antv表单验证api接口得知，如果想自定义表单校验规则需要使用validator字段调用自定义校验方法，自定义方法需要传rule, value, callback这三个参数。知道这些就可以动手敲代码了，具体实现如下HTML模块 <h1>表单正则验证</h1> <a-form-model :model="checkData" :rules="rules" ref="ruleFo

HTML标签模块 <a-row> <a-col :span="12"> 开始时间：<a-date-picker style="width: 100%" @change="onChange" valueFormat="YYYY-MM-DD" v-model="startTime" :disabled="readon

今天在用Vue+ant的UI框架进行表单绑定的时候出现报错 Warning: [antdv: FormModel] model is required for resetFields to work.通过不断测试才发现是因为没有在表头使用 :model="xxx"进行数据绑定 <a-form-model :model="form" :rules="rules" ref="ruleForm" :layout="'horizontal'" :labelCol="{ span: 5 }">

VUE+TS的Vue.set为对象设置（添加）一个属性有时候在使用的时候需要一个唯一的主键绑定，如果没有唯一主键就可以使用Vue.set给对象新加一个属性（组合属性）作为一个唯一值 this.operationRecordData = JSON.parse(JSON.stringify(this.table1.operationLogs)); this.operationRecordData.forEach((item, index) => { //item为数组

vue2.0 ts父组件使用ref调用子组件的方法和值父组件中用ref绑定子组件，然后通过this.$refs.名字就可以获取子组件的值或调用相关方法。父组件<template> <div> <div class="parent"> <h1>父组件名字:{{parentName}}</h1> <a-button type="primary" size="large" @click="refGetCh

vue ts 子组件使用Emit给父组件传值在子组件:中使用 this.$emit(‘getChildInput’,value)函数给父组件传值，父组件:使用 @getChildInput="getChildInput"来接收传过来的值，其中"getChildInput"为接收的方法，需要自己定义，其中参数为子组件传过来的值，具体用法见代码实现。子组件<template> <div> <div class="child"> <div&

vue ts使用Prop向子组件传值在父组件中想要给子组件传值，可以在子组件使用 :parentName(子组件通过@Prop获取该值的变量名)=‘parentName’（想要传的值），这样，在子组件里可以通过 @Prop({ default: “default value” }) parentName!: string;获取父组件传过来的值了。父组件<template> <div> <div class="parent"> <h

功能描述：快速数学口算功能项目要求：1、 使用 Vue 2.0 + TypeScipt2、 可设置计算上限（如10以内、20以内，30以内，100以内等）3、 可设置计算方式（多选）可选项包括 加法、减法、乘法、除法5、 开始答题后，屏幕显示需要口算的表达式，如：3 + 2 等于多少？6、 屏幕下方提供0~9的数字键盘、后退键和确认键。7、 点击确认键后，判断输入是否为空，如不为空，进行答案判断，并提示正确和错误，延时3秒后下一题，如果已达到设置的连续出题数量，给出最终结果，显示做题数量和正

什么是VuexVueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data )。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vue有五个核心概念，state, getters, mutations, actions, modules。1. statestate是Vuex的基本数据，用来存储变量定义export default new Vuex.Store({