栋栋很优秀啊-CSDN博客

原创原生JavaScript购物车

效果：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding:0; } .box{ width:600px; margin: 10px auto; background: url(img/g.jpg)

2021-01-08 09:40:12 1789 4

原创 vue常用下载的依赖

1、全局安装 cnpm install vue-cli -gvue -V 查看版本2、初始化项目vue init webpack 项目名称（vue2的版本）3、下载sasscnpm install --save-dev sass-loader@7.3.1 -Scnpm install --save-dev node-sass4、下载跨域cnpm install vue-r...

2019-12-24 10:53:20 4378

原创 vue项目用axios获取本地json

vue项目用axios获取本地json

2022-09-26 21:58:08 890 1

原创 element表格合并

html代码如下： <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-

2021-10-02 18:27:56 627

原创 Vue 校验不能输入中文

οnkeyup=“this.value=this.value.replace(/[\u4E00-\u9FA5]/g,’’)”

2021-07-06 09:59:08 1053

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。/* Keyword values */mask: none;/* Image values */mask: url(mask.png); /* 使用位图来做遮罩 */mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 *//* Combined values */

2021-06-07 15:23:24 1395

原创 JavaScript 表达式和运算符(一)

加法赋值 (+=)加法赋值操作符 (+=) 将右操作数的值添加到变量，并将结果分配给该变量。两个操作数的类型确定加法赋值运算符的行为。加法或串联是可能的。let a = 2;let b = 'hello';console.log(a += 3); // addition// expected output: 5console.log(b += ' world'); // concatenation// expected output: "hello world"相加运算符 (+)相加

2021-05-29 14:29:20 210 2

原创 await

awaitawait 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。语法[返回值] = await 表达式;表达式一个 Promise 对象或者任何要等待的值。返回值返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。描述await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参

2021-05-28 08:38:10 529

原创 async function expression

async function expressionasync function 关键字用来在表达式中定义异步函数。当然，你也可以用异步函数语句来定义。语法async function [name]([param1[, param2[, ..., paramN]]]) { statements }参数name此异步函数的名称，可省略。如果省略则这个函数将成为匿名函数。该名称仅可在本函数中使用。paramN传入函数的形参名称。statements组成函数体的语句。描述异步函数表达式

2021-05-27 16:38:52 80

原创 ?. 可选链操作符js

为了避免报错，在访问adventurer.dog.name之前，要保证 adventurer 的值既不是 null，也不是 undefined。如果只是直接访问 adventurer.dog.name，而不对 adventurer 进行校验，则有可能抛出错误。通过使用 ?. 操作符取代 . 操作符，JavaScript 会在尝试访问 obj.first.second 之前，先隐式地检查并确定 obj.first 既不是 null 也不是 undefined。如果obj.first 是 null 或者 .

2021-05-25 09:54:41 852

原创原生JavaScript淡入淡出效果

效果：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } body { height: 100%; } .box { width: 250px; heigh

2021-01-21 16:20:51 154

原创原生JavaScript随机点名表

效果：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width:300px; height:200px; border:1px solid #ccc; /*position: absolute; left:0; right:0;

2021-01-12 09:34:58 419 4

原创视频转GIF图

给大家说一下我一般用的视频转GIF图是怎么转换的教程：网址：https://ezgif.com/maker觉得有用的话点个赞吧

2021-01-11 09:09:49 122

原创用HTML5Css敲一个画图

效果：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>MacBook Air</title> <style> .board { margin: 0 auto; padding: 0 auto; width: 600px; height: 450px; margin-top: 50p

2021-01-10 14:40:12 238

原创原生JavaScript留言板

效果：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #txt2{ width:400px; height:50px; margin-top:5px; } #span1{ margin-left:200px; } #box{

2021-01-09 14:27:36 315

原创 JavaScrip实现点击切换验证码及校验

效果：代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 40px; background-color: red; color: #fff; text-align: center; line-height: 4

2021-01-07 15:02:35 243

原创原生JavaScript选项卡

效果：代码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul,li{list-style: none;} .box{ width:300px; height:300px;

2021-01-06 08:53:47 121 2

原创 JavaScript原生轮播图

效果：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .banner { width: 120

2021-01-05 11:07:54 145 2

转载 Vue项目实战，现点击切换验证码(组件)及校验

先看效果父组件<template> <div class="login"> <van-field center clearable label="验证码" placeholder="输入验证码" v-model="verify" > <template #button> <vueImgVerify ref="verifyRef" />

2021-01-04 16:22:13 590

原创 vuex购物车demo

先看效果:代码：<template> <div class="Home"> <h1>vuex购物车案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div></template><script>import AddFrom from './Add.vue'import ShopCart

2020-12-16 22:09:00 230

原创 element ui 解除禁用按钮状态

先看先看效果:dome代码<template> <div class="home"> <el-button type="primary" @click="add">点击解除禁用按钮</el-button> <el-button type="success" :disabled="disabled" @click="btn(display)">禁用按钮</el-button> <div v-show="isSho

2020-12-11 22:45:27 3645

原创如何将带参数的路径接收

如何将带id参数的路径接收<a href="b.html?a=1&b=2&c=3#e=4&d=5">b页面</a><a href="c.html?a=1&b=2&c=3#e=4&d=5">c页面</a>首先给他们一些路径参数之类的在b页面里接收 function myFun(attr){ console.log(location); var serachStr=location.search

2020-10-21 17:38:39 1068 1

原创 JavaScript事件委托

事件委托把一个元素相应事件(click、keydown…)的函数委托到另外一个元素一般的来讲，会把一个或者一组元素委托到他的父层或更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。例子：：：比如一天中午大家去楼下买饭，一种方法就是他们都傻傻地一个个去买, 另一种方法就是马云不想去，就让马化腾帮忙带一下，然后张一鸣表示让马化腾也带一下，最后大家都没去，就马化腾自己去买饭了，然后回来再根据每个人的名字一一

2020-09-07 14:02:35 191

栋栋的博客