木偶陈-优快云博客

原创 JS数组根据对象属性值合并成新的json数组

1.数据源 var itemData = [ {id:1,garbageType:"3",weight:"21.3",deliverName:"陈木偶"}， {id:2,garbageType:"4",weight:"35.3",deliverName:"陈小丑"}， {id:3,garbageType:"3",weight:"29.3",deliverName:"陈木偶"}， {id:4,garbageType:"4",weight:"45.3",deliverNam

2022-05-18 13:54:49 608

原创 JS获取数组对象中的其中一个属性组成新的数组

1. var data=[ {name:"jack"; weight:"50"}, {name:"jack1"; weight:"51"}, {name:"jack2"; weight:"52"}, {name:"jack3"; weight:"53"}, {name:"jack4"; weight:"54"},]2. var newWeightArr = data.map((item, index) => { return item.wei

2022-05-16 11:06:58 7373

原创 vue el-upload 和form表单一起提交

图片上传和表单同时一起提交1.  <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="商品名称" prop='goodsName' style="width:40%">

2021-09-08 14:45:02 5134 1

原创微信小程序发送验证码倒计时

微信小程序发送验证码倒计时1. 注意disabled属性是表单属性，在view，text中不生效<button type="size" bindtap="sendCode" disabled="{{smsFlag}}" class="btnCode" style="color:{{sendColor}}">{{sendTime}}</button>2. js部分 data { sendTime: '获取验证码', snsMsgWait:

2021-06-19 17:27:17 267

原创 vue打包部署到后端服务器

vue 打包部署到后端服务器1.命令行 npm run build 生成 dist文件夹，点击打开index.html文件会发现页面空白，打开控制台很多资源路径访问不到报错： Failed to load resource: net::ERR_FILE_NOT_FOUN bg.6257696.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND element-icons.535877f.woff:1 Failed to load resou

2020-12-02 09:22:11 1770

原创 vue element-ui 查询功能（前端）

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

2020-11-05 10:29:25 18993 7

原创 vue+element-ui+el-upload+ oss 阿里云上传视频和图片（前端处理）

vue+element-ui+el-pload+ oss 阿里云上传视频和图片（前端处理）1.安装 oss 依赖包npm install ali-oss --save2.新建 oss.js // 引入ali-osslet OSS = require('ali-oss')/**阿里云配置 * [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。 * [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。

2020-09-23 11:02:37 3490 1

原创 vue中img标签src属性自定义变量

vue中img标签src属性自定义变量（一）在标签内用require导入，注意格式 <img :src="require('../../assets/' +imgUrl+'.png')" />（二）在data中定义 data() { return { imgUrl: 'popup-perishable' } },

2020-09-19 09:23:54 3043

原创 element-ui el-dialog 新增编辑动态分配标题

vue element+ui 新增编辑一个弹出框,动态分配标题1.弹出框动态绑定标题:title <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" :rules="rules" ref="ruleForm"> <el-form> <el-form-item label="角色" :label-width="fo

2020-09-07 13:56:07 2297

原创 vue element-ui 前端实现分页效果

vue element-ui 实现前端处理分页1.使用el-pagination分页插件!--分页条--> <div class="page"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page

2020-09-05 14:09:42 6847 9

原创 css3d旋转过渡

day8(css3d旋转过渡)before和after伪元素(详解)之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查cont...

2019-09-23 09:24:54 898

原创 css盒子浮动

day6(css盒子浮动)content宽度和高度使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： /*外盒尺寸计算（元素空间尺寸）*/...

2019-09-23 09:23:15 374

原创 css样式表及选择器

day5（css样式表及选择器）引入CSS样式表内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>...

2019-09-23 09:22:24 204

原创 css三大特性和盒子模型，边距

day4CSS 三大特性css，层叠样式表CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。1.样式冲突，遵循的原则时就近原则2.样式不冲突...

2019-09-23 09:21:44 135

原创 css样式和属性

day3CSS 网页的美容师CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。CSS样式规则使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：h1{ ...

2019-09-23 09:20:23 1069

原创表格表单html5新标签

day2表格 table(使用)表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。创建表格在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：<table> <tr> <td>单元格内的文字</td> ... </tr> ...</t...

2019-09-23 09:19:52 344

qq_41875271的博客