- 博客(70)
- 收藏
- 关注
RSS订阅原创 将下列对象组合为树状结构
数据结构如下图展示：let treeList = []const map = {}data.forEach(item => { map[item.id] = item})data.forEach(item => { const parent = map[item.errorPid] if (parent) { (parent.children || (parent.children = [])).push(item) } else { treeList
2022-02-17 13:40:04
416
原创 elementUI Input 输入框清空后获取不到再次输入的值
出现BUG：页面的根据搜索条件搜索数据，清空以后重新输入，获取的还是之前的值；elementUI 的表单验证，在一次失去焦点后无法再次触发；解决：需要在失焦后重新赋值<el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"clearablev-model="filters.name"@blur="filters.name = changeValue($event)"></el-input>chan
2021-11-16 13:54:45
1531
原创 vue prop不同数据类型(数组，对象..)设置默认值
常用的数据类型的设置默认值的写法：Number,String,Boolean,Array,Function,ObjectrefAge: { type: Number, default: 0},refName: { type: String, default: ''},hotDataLoading: { type: Boolean, default: false},hotData: { type: Array, default: () => {return
2021-10-21 15:18:51
2113
原创 elementUI实现el-select嵌套el-tree
html部分<el-form-item label="树型结构"> <el-select v-model="treeData" placeholder="请选择..." ref="mySelect" > <el-option :value="treeDataValue" style="height: auto" > <el-tree ref="tree"
2021-09-28 22:47:03
721
原创 格式化金额到千分位
方法一：// 格式化金额(无保留小数)function toThousands(num) { var result = [], counter = 0; num = (num || 0).toString().split(''); for (var i = num.length - 1; i >= 0; i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0)
2021-09-13 17:08:41
292
原创 根据某个对象属性对数组进行排序
// 根据每个人的年龄，升序排序数组personconst person = [ {name:"jack", age:21}, {name:"rose", age:17}, {name:"mike", age:23}, {name:"jonny", age:9}]; function objectSort(age) { // 比较函数通过age属性获得对象的年龄进行比较 // 比较函数作为函数返回值返回给sort return function
2021-08-24 14:40:50
301
原创 js二维数组转一维数组方法
var arr1 = [[0, 1], [2, 3], [4, 5]];var arr2 = arr1.reduce(function (a, b) { return a.concat(b)} );// arr2 [0, 1, 2, 3, 4, 5]var arr1 = [[0, 1], [2, 3], [4, 5]];function flatten(arr) { return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x)
2021-08-24 14:22:34
307
原创 Vue组件间的传值
父子传值:1、父传子：子组件通过props方法接受数据2、子传父：子组件写法：<button @click="toParent('我要去父组件')">向父组件传值</button>toParent(val) { this.$emit('parentFn',val)}父组件接收：定义子组件的方法<child @parentFn="change($event)"></child>change(data) { conso
2021-07-26 10:43:54
63
原创 vue项目中折线图的渲染
本文以echart5.0版本实现，4.0版本引入详见柱状图引入import * as echarts from 'echarts'export default { data () { return {} }, methods: { init () { let oldData = {'2021-03-03': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight
2021-07-07 10:07:02
315
原创 windows10版本下，JDK环境变量配置
1、安装jdk官网地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html一路“下一步”安装成功。中间提示更改安装地址，看你自己意愿。我安装在了D盘。2、环境配置此电脑右键打开属性 > 高级系统配置 > 环境变量 > 系统变量 (注意不是用户变量哦！！！)点击“新建” ，弹出窗口，环境的变量：JAVA_HOME 变量值为Java的安装路径，本人为： D:\Java
2021-05-25 10:44:59
174
原创 Vue项目中如何监听多个对象
使用computed配合watch监听变量变化1、先在computed中，用需要监听的值(start、end)定义一个对象(dateRange)2、然后在watch中监听这个对象(dateRange)data() { return { start:'', end:'' }},computed: { dateRange() { const { start, end } = this return { start, end } }
2021-05-21 14:54:25
887
原创 涨知识啦！nrm切换镜像源
nrm切换镜像源1、作用：npm的镜像源管理工具。有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换2、全局安装npm install -g nrm3、使用。查看可选镜像源<nrm ls>nrm ls
2021-04-15 11:33:01
244
原创 Echarts内置渐变器：new echarts.graphic.LinearGradient(a,b,c,d,arr)
Echarts实现渐变颜色如果给echarts图设置颜色，我们会在 option 中 传入 color 字段的一个数组let option = { color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']}对于颜色渐变的起始角度，还有渐变程度，并非直接用数字就可以直白表达出来的color: [
2021-04-13 14:54:08
5136
原创 VUE利用正则表达式给特定文本添加颜色
利用正则表达式给特定文本添加颜色展示如下：<div class="content">审核内容：<span v-html="filterWord(content)"></span></div>注意：方法一定一定要写在v-html里面，不然会将标签显示在页面的哦！！！data() { keyword: ['人们','在'], content:'人们都在吃饭，人们都在睡觉，人们都在打豆豆。'}methods: { filterWord (t
2021-04-09 17:12:33
1347
原创 isNaN() 和Number.isNaN()
isNaN() 和Number.isNaN()的用法：1、isNaN()是ES5的方法，Number.isNaN()是ES6的方法。2、isNaN：通过Number方法把参数转换成数字类型，如若转换成功，则返回false，反之返回true，它只是判断参数是否能转成数字，不能用来判断是否严格等于NaN。3、如果要判断某个值是否严格等于NaN不能用这个方法，ES6提供了Number.isNaN方法用来判断一个值是否严格等于NaN，它会首先判断传入的值是否为数字类型，如不是，直接返回false。
2021-04-02 10:13:40
658
原创 VUE的路由(二)：传参
<div @click="goDetail(3)">查看详情</div>一、动态传参，刷新页面数据不会丢失goDetail(id) { this.$router.push({ path: `/detail/${id}`, })}路由表配置{ path: '/detail/:id', name: 'detail', component: detail}子组件获取this.$route.params.id二、通过路由属性
2021-04-01 10:35:39
121
原创 VUE的路由(一)：模式
abstract模式适用于所有JavaScript环境，例如服务器端和Node.js. 如果没有浏览器API，路由器将自动强制进入此模式。hash模式就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的，所以每次改变hash不会重新请求加载页面hash 改变会触发 hashchange 事件hash变化会被浏览器记录，浏览器的前进和后退都能用。能兼容到ie8history模式...
2021-04-01 10:13:14
69
原创 javaScript检测对象是否包含有数组中的某一项
如何判断对象是否含有数组中的某项，如果没有该项则插入该项并赋值0题干：let arr = [“a”, “b”, “c”, “d”]let obj = {a:12,b:13}期望结果：res = {a:12, b:13, c:0, d:0}Method 1：arr.forEach(item => { if (obj.hasOwnProperty(item)) { obj[item] = obj[item] } else { obj[item] = 0
2021-03-31 10:36:54
190
原创 Typescript入门学习（一）
一、安装TypeScript1、通过npm（Node.js包管理器）npm install -g typescript2、安装Visual Studio的TypeScript插件二、创建第一个.ts文件在编辑器里，创建一个hellowWorld.ts文件let demo:string = "Hello World" console.log(demo)三、运行文件tsc hellowWorld.ts编译结果为：hellowWorld.js文件，展示为："use st
2021-03-22 10:45:49
65
原创 解决Vscode提示code安装似乎损坏
打开vscode，老是有这样一句提示原因：安装了一个叫background的拓展，并且编辑器的标题栏会显示不受支持四个字解决方案：1、下载一个叫Fix VSCode Checksums的拓展2、ctrl+shift+P打开命令面板3、输入：Fix Checksums: Apply4、重启vscode即可...
2021-03-14 17:34:50
2033
1
原创 NODE环境配置之Windows篇
1、了解node.js简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。2、下载node.js下载地址：https://nodejs.org/en/download/3、安装1.双击“node-v6.9.2-x64.msi”，开始安装Node
2021-03-03 10:49:23
497
原创 封装26个大写字母方法
function AToZ(){ let arr = []; for(var i=0;i<26;i++){ // String.fromCharCode：接受一个指定的 Unicode 值，然后返回一个字符串 // 65代表字母A arr.push(String.fromCharCode(65+i)) } return arr}AToZ()...
2021-03-03 09:43:19
167
原创 js操作数组与字符串的转换
1、字符串转数组1、str.split(",",length)：将字符串按某个字符切割成若干个字符串，并以数组形式返回参数说明：1）指定分隔符，指定从哪儿进行分隔的标记2）指定要返回数组的长度let str = '1,2,3'console.log(str.split(',')) // ["1", "2", "3"]console.log(str.split(',',2)) // ["1", "2"]console.log(str.split('-')) // ["1,2,3"]
2021-02-25 15:01:04
440
原创 vue项目使用vue-awesome-swiper及填坑
1、下载插件npm install --save vue-awesome-swiper2、引入1.全局引入在 main.js 里引入（全局）:import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)import 'swiper/dist/css/swiper.css'2.局部引入<script>import 'swiper/css/swiper.css'import {
2021-02-24 15:59:34
760
原创 闭包的知识点
1、含义闭包是指有权访问另外一个函数作用域中的变量的函数闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。2、变量的作用域1、全局变量：在函数内部可以直接读取全局变量var a = 5 //定义全局变量afunction closure() { console.log('获取全局变量a：' + a
2021-02-22 11:35:26
264
原创 JS操作字符串常用方法及增删改查
1.截取从 start 位置开始， end 位置结束(不包含 end) 的字符串，返回一个新字符串2.若参数为负数，需要从尾部位置倒数 负数参数长度 作为生效位置3.start 大于 end ，则返回空字符串；start 大于字符串长度，返回空字符串
2021-02-19 11:24:29
902
原创 使用js向字符串开始位置追加字符串
向字符串开始位置追加字符串str = “全剧,片花预告,穿帮,精选” // [“全部”，“全剧”，“片花预告”，“穿帮”，“精选”]let str = '全剧,片花预告,穿帮,精选'str.slice(0,0) // ""str.slice(0,0).concat('全部，') // "全部，"str.slice(0,0).concat('全部，', str) // "全部,全剧,片花预告,穿帮,精选"str.slice(0,0).concat('全部，', str).split(',')
2021-02-19 10:37:34
4953
原创 canvas实现电影票随机座位
<canvas id="myCanvas" width="600" height="600" style="background:#eee"></canvas> <button id="btn1">1个</button> <button id="btn2">2个</button> <button id="btn3">3个</button>var myCanvas = document.
2021-02-10 14:50:59
1261
原创 Math.xx()函数常用方法汇总
Math 是数学函数，但又属于对象数据类型 typeof Math => ‘object’console.dir(Math) 查看Math的所有函数方法Math对象绝对值Math.abs()Math.abs(-12) => 12取整// 1.向上取整// 即小数部分直接舍去，并向正数部分进1Math.ceil() Math.ceil(12.1) = 12Math.ceil(12.8) = 12Math.ceil(12.0) = 12Math.ceil(-12..
2021-02-07 10:09:16
305
原创 JS数组遍历常用方法总结
arr.some(item,index,array)用法：检测数组中的元素是否满足指定条件参数：1. item：数组中正在处理的元素。2. index：数组中正在处理的元素的索引值。(可选)3. array：被遍历的数组。执行：依次检测数组中每一个元素是否符合给定函数的条件，返回布尔值，不会对空数组处理，不改变原数组返回：1、如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。-2、如果没有满足条件的元素，则返回false。注意：有一个满足就返
2021-02-04 14:45:34
257
原创 JS操作数组之增删改查总结
万能方法：splice()向数组指定位置添加任意数量的元素用法：传入至少3个参数：1：增加时，起始位置、要删除的元素个数、要添加的元素，第二个参数传02：删除时，起始位置、要删除的元素个数，第二个参数传要删除的个数3：改，参考增加和删除let arr = [-2, -1, 0, 1, 2, 3]arr.splice(3,0,0.2,0.4,0.6,0.8)console.log(arr) // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]arr.sp
2021-02-02 11:00:42
273
原创 vue移动端使用手势库---alloytinger
操作图片拖拽、缩放、长按下载 npm i alloyfinger --save使用（全局注册） // main.js import AlloyFinger from 'alloyfinger' import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue' Vue.use(AlloyFingerPlugin,{ AlloyFinger })使用 <div v-finger:pinch="p
2021-01-13 15:25:41
1311
原创 mpvue微信小程序开发总结（二）--- vant-weapp组件
使用vant-weapp组件本文以vant-weapp为例步骤见官网快速上手：https://vant-contrib.gitee.io/vant-weapp/#/quickstart注意事项：webpack.base.config.js配置 - 作用: 在编译的时候在小程序中复制node_modules文件加下的vant-app/dist目录new CopyWebpackPlugin([ { from: resolve('node_modules/vant-weapp/dist'
2020-12-28 15:51:03
407
3
原创 mpvue微信小程序开发总结（一）--- 创建及配置项目
一、熟悉结构官网地址：http://mpvue.com/mpvue/二、创建项目# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project# 安装依赖$ cd my-project$ npm install# 启动构建$ npm run dev三、下载微信开发者工具下载地址：https://dev
2020-11-26 11:31:04
362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人