javascript
昨夜太平长安888
愿你我既可以朝九晚五,也可以浪迹天涯;愿你我既可以拈花把酒,也能围炉诗书茶。
展开
-
vue 重置页面数据
vue 重置页面数据原创 2022-09-02 09:11:07 · 1499 阅读 · 0 评论 -
vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法
vue 中的 async await 异步 等待 按顺序执行原创 2022-06-17 14:17:30 · 8639 阅读 · 0 评论 -
常用简洁的 JS 代码片段
1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句,而不是在多行上编写 if-else。const age = 12;let ageGroup;// 常用写法if (age > 18) { ageGroup = "An adult";} else { ageGroup = "A child";}// 简写ageGroup = age > 18 ? "An adult" : "A child";但是,不要过度使原创 2022-04-01 17:44:10 · 461 阅读 · 0 评论 -
vue 动态添加条件或表头
话不多说 直接看效果代码如下:<template> <div> <el-form ref="formRef" label-width="70px" :model="formData" autocomplete="on" @submit.prevent> <el-row v-for="(item, index) in formData.querys" :key="index" :gutter="16" :xs="24">原创 2022-03-07 13:50:46 · 1094 阅读 · 1 评论 -
vue使用clipboard.js 《一键复制》
安装npm install clipboard --savevue项目我们可以对其进行简单的处理我们可以在项目目录下utils(没有新建)新建一个 clipboard.js文件import Clipboard from 'clipboard' //引入cliboardimport { ElMessage } from 'element-plus' //消息提示function clipboardSuccess(msg) { ElMessage.success(msg || '..原创 2021-11-11 15:09:16 · 1942 阅读 · 0 评论 -
js立即执行函数
一:什么是立即执行函数?声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;立即执行函数的创建步骤,看下图:二:立即执行函数的写法:有时,我们定义函数之后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。产生语法错误的原因是,function 这个关键字,既可以当做语句,也可以当做表达式,比如下边://语句function fn() {};//表达式var fn = function (){};转载 2021-08-06 16:29:41 · 10217 阅读 · 0 评论 -
【js数组】如何删除不想要的数据?
<script>export default { data() { return { data: [14, 25, 69, 24, 14, 59, 57, 68,57, 45, 879, 58,58, 42, 25, 56, 14], one:[] }; }, created() { this.x(); }, mounted() {}, methods: { x() { console.log(t.原创 2021-01-14 16:41:01 · 316 阅读 · 0 评论 -
VUE中使用sessionStorage或者localStorage存取对象或者数组时会显示[object object]
VUE如果直接使用sessionStorage.setItem和sessionStorage.getItem来进行存取对象的话,不能正常使用该对象,并且在Application的Session Storage中会显示[object object]解决方法:转换为json格式进行存取var ary = [1,2,3]var json = { x:1, b:2}存储://存储sessionStorage.setItem('arr',JSON.stringif原创 2020-11-06 16:28:26 · 4913 阅读 · 0 评论 -
VUE 项目手写穿梭框
项目用到了穿梭框这个功能,刚开始用 Element-UI 组件库来写,没有达到预期的效果,于是就自己手撸写了一个;先看效果:代码附上: <!-- 绑定设备弹窗 --> <el-dialog title="绑定定位触发器" :visible.sync="jobsBoundPopup" width="30%" center> <!-- 穿梭框 --> <div class="row"> <原创 2020-09-24 18:28:01 · 1360 阅读 · 1 评论 -
构造函数 原型链
1、构造函数是什么所谓的构造函数其实就是一个普通的函数前面加了new运算符,其实质也是一个函数,所以构造函数都有函数的prototype属性。 // 构造函数的目的:创建对象 // 学生类→ 构造函数 function Student(name,age,gender) { // 属性 this.name = name; ...原创 2019-12-27 11:50:30 · 402 阅读 · 0 评论 -
什么是深拷贝?浅拷贝?它们有什么区别?看完,你就全懂了!!!
1.什么是浅拷贝与深拷贝? 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。例子:let a=[0,1,2,3,4], b=a;console.log(a===b);a[0]=1;console.log(a,b);嗯?明明b...原创 2020-07-08 14:20:47 · 1265 阅读 · 1 评论 -
简单的VUE图片切换
实现的功能:点击上一张 下一张按钮实现图片上一张 下一张的图片切换 ; 当图片显示为第一张时,上一张按钮消失,但图片为最后一张时 下一张按钮消失; <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...原创 2020-04-23 19:46:04 · 2148 阅读 · 2 评论 -
JavaScript 遍历数组
所谓遍历数组就是把数组中的每个元素从头到尾都访问一边;我们可以通过 for 循环,进行遍历数组 这里需要注意的是 因为我们的数组是从索引 0 开始的,所以循环里面的 i 必须是从 0 开始的,i < 数组的长度 数组名.length; arr.length 是动态监测数组的长度是元素的个数,不要跟索引号混淆;长度是从1开始的; var...原创 2020-03-14 21:15:54 · 598 阅读 · 0 评论 -
for 循环
首先我们可以先了解一下 循环 的目的是什么? 循环的目的主要是用来执行一些重复性的操作;语法结构: for 循环主要用于把某些代码循环若干次,通常跟计数有关系; for(初始化变量; 条件表达式; 操作表达式){ 循环体 }初始化变量:就是用var 声明的一个普通变量,通常用于作为计数器使用; ...原创 2020-03-09 21:20:16 · 401 阅读 · 0 评论 -
switch语句 和 if else if 语句的区别
switch ... case 通常处理 case为比较确定值的情况,而 if ... else 语句更加灵活,常用于范围判断(比如大于、等于某个范围); switch 语句进行条件判断后直接执行到程序的条件语句,效率更高一些,而 if ... else 语句有多种条件,是从往下进行判断,就得判断多次,所以效率相比于switch会稍微差些; 当分支较少时, if ... else 语...原创 2020-03-08 22:45:17 · 1525 阅读 · 0 评论 -
switch 语句
语法结构: switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码,当要针对变量设置一系列的特定值的时候,可以使用switch语句; switch(表达式(变量)) { case value1: 表达式等于value1时执行的语句; break; ...原创 2020-03-08 22:31:25 · 490 阅读 · 0 评论 -
JavaScript 三元表达式
语法格式: 条件表达式 ?表达式1 :表达式2执行思路: 如果条件表达式的值为真(true)时,则返回表达式1的值;如果条件表达式的值为假(fasle)时,则返回表达式2的值。 var score = 18; score > 13 ? alert('是对的') : alert('是错的');既然是表达式肯定是有返...原创 2020-03-01 17:55:22 · 588 阅读 · 0 评论 -
JavaScript if条件判断语句
一、语法格式: if (条件表达式) { //条件为true时,所执行的代码语句 }二、 执行流程原创 2020-03-01 15:38:14 · 2994 阅读 · 1 评论 -
JavaScript 赋值运算符
所谓赋值运算符 就是把数据赋给变量的运算符赋值运算符 说明 案例 = 直接赋值(把右边的值直接赋给左边的变量) var a = 5 ; += 、-= 加、减一个数后 在赋值 var b = 1; b+= 2; // 3 *= 、/= 、 %= 乘、除、取余 后在赋值 var c = 2; c *= ...原创 2020-02-28 16:25:39 · 230 阅读 · 0 评论 -
JavaScript 逻辑运算符
一 、逻辑与 && 两边的值都为true,结果才为 true,如果只要有一侧的值为false,结果就为 false; console.log(2 > 1 && 1 < 2); // true console.log(3 > 2 && 1 > 2); //false二 、逻辑或 || ...原创 2020-02-27 18:32:37 · 249 阅读 · 0 评论 -
JavaScript 比较运算符
比较运算符 比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。这里需要注意的是等于== 运算符 和 全等 === 运算符,==运算符 会默认转换数据类型,当数字类型和字符类型相比较时,会自动将字符类型转换成数字类型进行比较,只要求值相等就可以了;而 全等 === 运算符,要求两边的值 和 ...原创 2020-02-27 14:43:57 · 203 阅读 · 0 评论 -
javascript 数据类型转换
一、数字类型 转换成 字符串类型1.1通过变量名.toString() ,可以将数字型转换成字符串型 var num = 15; console.log(typeof num); // number var num1 =num.toString(); console.log(typeof num1); // string1.2 通过Stri...原创 2020-02-25 16:52:11 · 236 阅读 · 0 评论 -
三级联动(原生js)
详细版:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2020-01-02 17:18:32 · 1144 阅读 · 0 评论 -
四级联动(js)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2020-01-02 17:08:24 · 2303 阅读 · 0 评论 -
三级联动(地址:省市区)
JS 原生<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-12-31 11:56:37 · 772 阅读 · 0 评论 -
JS原生 淘宝放大镜
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...原创 2019-12-20 20:03:15 · 138 阅读 · 0 评论 -
JS 原生 Tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-12-19 23:23:58 · 100 阅读 · 0 评论 -
Javascript DOM 对象
什么是DOM对象:HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。...原创 2019-12-13 14:21:58 · 95 阅读 · 0 评论 -
函数作用域
函数作用域在JavaScript中变量的作用域,并非和C、Java等编程语言似得,在变量声明的代码段之外是不可见的,我们通常称为块级作用域,然而在JavaScript中使用的是函数作用域(变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的)JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的,可以在整个函数的范围内使用及复用,也就是说在函数体内变量...转载 2019-12-11 15:38:08 · 214 阅读 · 0 评论 -
计时器 setInterval 练习, 秒杀 时钟
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...原创 2019-12-10 20:38:13 · 390 阅读 · 0 评论 -
数组去重,封装数组去重
1. 相对于数组本身进行去重var arr = [15,35,27,15,29,31,35,15];for(var i = 0; i < arr.length; i++){ for(var j = i + 1; j < arr.length; j++){ if(arr[i]==arr[j]){ arr.splice(j,1) ...原创 2019-12-10 16:27:56 · 465 阅读 · 0 评论 -
JavaScript之 事件委托? 如果阻止事件冒泡?
什么是事件委托? 事件委托就是利用冒泡的原理,将事件加到 父元素 或 祖先元素上,触发执行效果!说起事件委托我们先来了解一下事件的三个阶段: 1. 事件捕获阶段(从外到内) 产生事件的时候会从document发出一个事件流,这个事件流随着我们的DOM树流向触发事件的目标; 2. 事件目标阶段 ...原创 2019-11-20 20:21:14 · 489 阅读 · 0 评论 -
JQuery 筛选
1.dom.eq(index); 返回dom中索引为index的对象2.dom.first();返回dom集合中索引为0的对象集合;3.dom.last();获取dom集合中索引为最后一个对象的集合4.dom.find(选择器);返回dom后代元素中,符合表达式规则的元素集合;5.dom.next();返回dom下一个相邻兄弟节点的集合...原创 2019-10-17 18:59:26 · 127 阅读 · 0 评论 -
JQuery 什么是JQuery?
什么是JQuery? jQuery 是一个 JavaScript 函数库,jQuery 库可以通过一行简单的标记被添加到网页中,jQuery 库 的特性: 1. 可以对HTML的元素进行选取; 2. 可以对HTML的元素进行操作; 3. 可以对 CSS进行操作; 4. 可以获取HTML时间函数; ...原创 2019-10-12 16:59:03 · 252 阅读 · 0 评论 -
重学 JavaScript 数组
什么是数组? 数组是一种特殊的变量,它能够一次存放一个以上的值。数组的类型可以是任意类型!!!如何创建数组?(new Array) 1.常规方式var arr = new Array(2); // 创建一个长度为3的数组! 前面的[0][1][2],表示的是索引arr[0] = 1;arr[1] = 2;arr[2] = 3; ...原创 2019-09-30 17:09:42 · 344 阅读 · 0 评论 -
JavaScript 简介
什么是javascript? JavaScript是一种解释性、弱类型语言! ECMAScript:描述了该语言的语法和基本对象! 文档对象模型(DOM),描述处理网页内容的方法和接口; 浏览器对象模型(BOM),描述与浏览器进行交互的方法和借口;特性: 简单、动态性、跨平台性、不同服务器端脚本语言!优点: 1.使用j...原创 2019-10-02 17:26:38 · 104 阅读 · 0 评论 -
Javascript 的引入和输出方式
javascript的引入方式: 1 .外部JS文件引入 通过script标签中的src属性引入,在head标签中写 (重点)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...原创 2019-10-02 18:00:27 · 301 阅读 · 0 评论 -
Javascript 基本语法
JS语法: 1. 严格区分大小写 变量、函数名、运算符以及其他一切东西都是区分大小写的。 2. 变量是弱类型 ECMAScript 中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值 3.每行结尾必须有分号; 4.JavaSc...原创 2019-10-02 20:21:14 · 208 阅读 · 0 评论 -
JavaScript 变量
变量: 所谓变量就是初始化后可以再次改变值的量。我们可以把变量看做是存储数据的容器。JavaScript的变量是弱类型(松散类型)的,所谓弱类型就是可以用来保存任何类型的数据。所谓变量,可变的量,变量的值是可以更改的; 变量需要先声明在赋值; 变量是可以重复赋值的; 一个var可以同时声明多个变量; 变量存储的数据类型是可变的;在js中如何声明变量:...原创 2019-10-02 21:45:07 · 312 阅读 · 0 评论 -
JavaScript 基本数据类型
五种常用基本数据类型:undefined 声明为赋值; null 空值; number 数值类型; string 字符串类型; boolean 布尔值;一、undefined类型 变量声明但是未赋值,结果就是undefined<script> v...原创 2019-10-02 22:44:15 · 239 阅读 · 3 评论