![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
small面包
这个作者很懒,什么都没留下…
展开
-
el-table修改某列的颜色和行的样式与原生js设置某行的颜色
想要修改某一列的颜色效果如上,下面直接上代码<template> <div> <el-table :data="tableData" style="width:90%;margin-left:5%;margin-top:2%" border :cell-style="changeCellStyle" > <el-table-column prop="date" .原创 2020-06-12 13:46:20 · 7125 阅读 · 2 评论 -
把一个数组中的小数分离出
这里主要是针对判断小数下面是个小demo var arr = [1, 2, 3, 4, 5.533, 1.2, 2.5, 4] var y = /.*\..*/ var res = '' arr.forEach(item => { //判断是否为小数,小数位true this.res = this.y.test(ite...原创 2020-04-16 15:50:22 · 225 阅读 · 0 评论 -
vue中后台返回的数据展示并把嵌套的内容追加在当前数据后面并为嵌套的数据添加标记
前两天发布了个任务是追加表格到当前数据的下面并做标记,本来自己也认为是个简单的东西没想到弄了两天下面跟大家分享一下打开别人的项目首先找初始化的接口,辗转反侧牵扯好几个页面下面咱们先看一下后端返回的数据形式是一个嵌套的数据要把当前的嵌套的数据追加到当前数据的下面其实很简单就是一个简单的数组的操作下面是追加的代码//你自己的接口和要传递的参数一般传递页码和当前页面条数this.$axi...原创 2020-03-31 14:45:35 · 3362 阅读 · 0 评论 -
用Vue写移动端购物车功能
先看一下效果用计算属性计算比较方便,下面是这部分的逻辑代码<template> <div> <div class="top">购物车</div> <table> <tr v-for="item in list" :key="item.id" >...原创 2020-03-18 11:05:50 · 851 阅读 · 2 评论 -
前端实时钟表
想要实时的钟表首先进行样式的书写然后进行js代码下面是完整的代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>钟表</title> <link rel="stylesheet" /> <st...原创 2020-03-06 17:39:36 · 1288 阅读 · 1 评论 -
CSS让一个盒子在另一个盒子里居中
今天想写个钟表,但是里面会套一层盒子。下面直接上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /...原创 2020-03-06 13:56:19 · 4725 阅读 · 0 评论 -
CSS写爱心
今天用伪元素写爱心,但一定要记住::before和::after必须和content共同使用,即使没有内容也应该用’'代替<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt...原创 2020-03-05 14:06:17 · 195 阅读 · 0 评论 -
前端2D变换
2D转换是使元素改变形状、尺寸和位置的一种效果2D转换包括translate(位移)rotate(旋转)scale(缩放)skew(倾斜)translate(位移)//平移: translate(水平位移, 垂直位移)//eg:让div水平居中<!DOCTYPE html><html lang="en"> <head> <meta ...原创 2020-03-05 11:08:46 · 216 阅读 · 0 评论 -
background的各种属性
今天发现background存在很多属性进行一下整理背景尺寸background-size//50% 50%//cover 覆盖: 背景图片一定会等比例最大化的铺满盒子,图片可能显示不完整//contain 包含: 背景图片一定会等比例最大化 完整的包含盒子中, 图片可能不会铺满盒子背景原点background-origin//content-box 背景图像相对于内容...原创 2020-03-04 14:33:08 · 767 阅读 · 0 评论 -
sort进行排序
sort的排序规则是根据字符串unicode编码进行排序,从0-9从a-z如果要进行特定大小的排序,需要自己制定规则sort的返回值大于一说明要交换位置var arr = [1,5,6,8,4,9,13,11]arr.sort(function(a,b){ return a-b //a-b>0需要交换位置也就是从小到大})下面封装一下自己的sort函数var arr = ...原创 2020-02-28 17:07:35 · 423 阅读 · 0 评论 -
Math内置对象
1.Math.PIMath.PI就是咱们平时用的π2.Math.max求最大值Math.max(1,2,55,23) //553.Math.min最小值Math.min(1,3,88,54,0) //04.Math.cell向上取整Math.cell(1.1) //2Math.cell(-1.1) //-15.Math.floor向下取整Math.floo...原创 2020-02-28 14:51:36 · 147 阅读 · 0 评论 -
冒泡排序
进行排序是前端经常遇到的一个问题下面是做了一个性能优化的冒泡排序//大家都知道冒泡排序需要进行双重for循环for(var j = 0; j < arr.length - 1; j++){ //首先假设数组已经排序完成 var flag = true for(var i = 0; i < arr.length-1-j; i++){ if(arr[i] > arr[...原创 2020-02-28 10:11:31 · 63 阅读 · 0 评论 -
js的循环语句
while打印1-10的数字并求和首先打印数字var i = 1var sum = 0while( i <= 10 ){ conosle.log(i); //打印1-10的数字 sum += i; //求得1-10之间的和 i++; //如果忘记会出现死循环}console.log(sum) do whiledo{ 先执行循环体}while(条件)//打...原创 2020-02-27 16:12:01 · 113 阅读 · 0 评论 -
三元运算符
三元运算符是用来简化if else的判断(简化简单的 if else)举个例子找最大值var a = 5;var b = 10;//用if判断写法if(a < b){ console.log(b)}else{ conaole.log(a)}//用三元运算符写var max = a < b ? b : aconsole.log(max)...原创 2020-02-27 14:13:01 · 82 阅读 · 0 评论 -
js的类型转换
number 控制台打印为蓝色string 控制台打印为黑色boolean 控制台打印为蓝色undefined 控制台打印为灰色null 控制台打印为灰色如果在代码中查看用typeofconsole.log(typeof 1) //numberconsole.log(typeof '1') //stringconsole.log(typeof boolean) //bo...原创 2020-02-27 13:37:12 · 119 阅读 · 0 评论 -
js运算符
js算数运算符主要有 + - * / %加减乘除和取余这几种方式下面举几个例子console.log(10 + 10) //20console.log(10 - 10) //0console.log(10 * 10) //100console.log(10 / 10) //1console.log( 15 % 10) //5console.log(10 + '1...原创 2020-02-27 11:10:08 · 360 阅读 · 0 评论 -
npm run serve报错
脚手架创建项目会遇到很多问题今天我遇到一个问题总结下来有遇到相同问题的可以进行参考问题主要是红框的没有找到这个文件解决的办法很简单就是运行时打开错了文件所以会进行报错我创建的文件是e/work/file/demo/所以我的文件打开错了...原创 2020-02-23 15:36:51 · 8769 阅读 · 4 评论 -
baidu-map did you register the component correctly? For recursive components, make sure to provi
今天我写elementUI中利用弹框弹出地图但是我遇到一个问题控制台报错如下这个问题的意思就是baidu-map没有被找到只需要在components中注册就解决报错问题 components: { BaiduMap },...原创 2020-01-03 12:04:37 · 1557 阅读 · 0 评论 -
vue遍历表格将数字转成千分制报错Cannot read property 'toFixed' of undefined
最近在做后台管理系统,将要将后台的数据转化成千分制的数字,但是出现了问题,看一下报错的情况然后我就对我的这个数据进行打印结果如下其中有undefined所以要进行一定的判断 if (typeof margin === 'undefined') { return } else { return Number(m...原创 2019-12-26 11:53:06 · 1289 阅读 · 0 评论 -
在vue中是文字换行
今天遇到一个问题,在显示静态资源没有请求接口的时候显示的数据可以进行换行,但是访问了接口后返回的数据正常,但是显示超出屏幕出现横向滚动条,找了半天的原因,发现可以用css进行操作对你要进行操作的盒子进行css的设置div{ white-space:normal; word-break:break-all; word-warp:break-word;}进行这样的设置文字自然进行换行...原创 2019-12-23 15:02:34 · 4369 阅读 · 0 评论 -
JS中的Math的常用函数
Math的几个常用的函数Math.ceil() //向上取值Math.floor() // 向下取值 Math.round() // 四舍五入Math.abs() //取绝对值Math.random() //随机数Math.ceil() //向上取值//举个例子document.write(Math.ceil(0.7)) //1document.write(Math....原创 2019-12-23 14:19:35 · 122 阅读 · 0 评论 -
eCharts表进行宽高的自适应
最近做eCharts图表,但是有个需求就是想要适配不同的屏幕,但是发现eCharts不能自己进行适配,然后就上网进行翻阅,现在进行总结一下首先我把eCharts单独提到一个组件中在需要的组件中进行引入下面看一下Echarts中index.vue中的代码<template> <div id="myChart" :style="{width: '600...原创 2019-12-20 14:06:36 · 2743 阅读 · 0 评论 -
前端手写自动旋转3D立方体
上一篇咱们写了一个3D的立方体,但是不能自己旋转,触摸之后可以进行旋转,现在是升级版的是自动旋转的立方体下面直接是代码<template> <div> <div class="top">懵懵懂懂</div> <div class="wrap"> <div class="cube"> ...原创 2019-12-17 17:36:22 · 377 阅读 · 0 评论 -
手写3D图形---立方体
最近写了一个3D的立方体的小demo,每个面可以添加图片也可以是背景颜色,直接上代码HTML代码(我这里放的是图片)<div class="cube"> <div class="front"><img src="./../assets/images/u=3038625765,121755996&fm=26&gp=0....原创 2019-12-16 11:13:04 · 158 阅读 · 0 评论 -
vue中使用swiper
最近在研究vue的周边技术,发现swiper,在官网中也有说明要如何进行操作,下面我进行进一步的总结首先在终端进行npm install vue-awesome-swiper --save在main.js中引入一下代码import Vue from 'vue'import 'swiper/dist/css/swiper.css'import VueAwesomeSwiper from...原创 2019-12-12 17:25:08 · 372 阅读 · 0 评论 -
vue移动端底部导航栏
最近写个小demo书写移动端的小demo,(别忘了移动端的适配问题)效果图如下点击底下的导航对应相应的页面代码如下<template> <div class="footer"> <el-row> <el-menu :default-active="this.$route.path" cla...原创 2019-12-12 09:41:41 · 3073 阅读 · 1 评论 -
vue中添加动画效果
最近在写一些小demo,在做移动端的页面,点击按钮跳转页面进行动画效果,发现一个最简单的方法Animate.css是一款不错的框架使用方法也很简单查看Animate.css文档在githup上进行下载安装cssnpm install animate.css -S在vue中引入import './../components/animate.css'使用也很简单 打开Animate...原创 2019-12-11 17:23:51 · 2822 阅读 · 0 评论 -
引入的组件添加事件
vue中给引入的组件添加事件,例如A组件引入searchionA组件代码<searchicon></searchicon>import searchicon from '../../components/searchicon/index' components: { searchicon },这样便引入了自己写的自定义的组件但是想要在引入的组件...原创 2019-12-09 14:53:03 · 300 阅读 · 0 评论 -
使用Bus第一次不能触发,以及多次打印和返回时保留数据
前端vue之间兄弟之间的传值用事件总线Bus1.首先同main.js同级创建Bus.jsimport Vue from 'vue'export default new Vue()2 在要传递的A组件中引入BusA组件 import Bus from './../../Bus.js' look (row) { this.$router.push('/lookplace'...原创 2019-12-09 12:01:02 · 958 阅读 · 3 评论 -
vue中回车键让input失焦让下一个input聚焦
最近项目中需要一个功能就是在一个input中输入完成后按下回车键自动跳转到下一个input框,让下一个input框自动聚焦代码如下:**html** <el-form ref="form" :model="form" > <el-form-item label-width="10px"> <el-inp...原创 2019-12-02 17:47:33 · 5174 阅读 · 1 评论 -
前端将数据转成千分制
前端将后台接收的数据转成千分制的数据这里是最简单的一个方法 var num = 123456 var num1 = num.toFixed(2) + "" //保留两位小数 var num2 = num1.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,") //千分制 //酱紫就可以将123456转化成123,456.00 f...原创 2019-11-28 17:44:31 · 511 阅读 · 1 评论 -
vue在el-table中加入开关
vue想在el-table中加入el-switch(滑块)html<el-table-column prop="prohibit" :show-overflow-tooltip="true" label="禁用" width="60" > <el-switc...原创 2019-11-26 14:54:40 · 2960 阅读 · 0 评论 -
Failed to mount component: template or render function not defined.
今天遇到一个问题,在vue脚手架2.0搭建的项目由于用单独的文件一页代码太多拆成html,css,js三个文件,但是报错了,报错信息如下Failed to mount component: template or render function not defined.,上网搜了很多原因,其实解决报错的办法很简单,只是js文件重名了,把index.js文件的名字改一下就可以了...原创 2019-11-10 18:27:36 · 758 阅读 · 0 评论 -
文字一行显示,多余部分省略号代替
今天遇到一问题,文字需要一行显示,多了用省略号代替css进行解决下面是一个小demo<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, in...原创 2019-11-07 17:19:19 · 1196 阅读 · 0 评论 -
vue中删除最后一页的数据
最近做一个后台管理系统,做一个简单的小功能,删除功能,但是在删除中发现自己做的一个小bug。在删除最后一页的最后一条数据时,页面变成上一页的页码,但是数据时当前页的空数据。下面是我找到的解决方案://在删除方法里进行以下操作 var maxPage = Math.ceil((this.total - 1) / 当页的条数) //向上取整 // console.log(this.tota...原创 2019-09-23 17:02:43 · 1119 阅读 · 0 评论 -
修改elementUI的主体颜色
elementUI文档中也有给出相关的步骤在这里也进行一定的分享首先在命令行输入npm i element-theme-g(安装主体生成工具)npm i element-theme-chalk -D(安装白垩主题)et -i (自定义变量文件) 根目录多出文件 element-variables.scss找到element-variables.scss文件,修改主题色变量(primary...原创 2019-08-06 09:10:00 · 2382 阅读 · 1 评论 -
从px转换成rem单位的基础设置
想要进行页面的适配效果,要进行媒体查询或动态js获取那么px怎么转化成rem呢首先再编译器中进行px2rem插件的下载在编译器的左下角设置中点击设置在设置中找到扩展,并在扩展中找到px2rem在Root Font Size 中进行设置一般设置屏幕的十分之一,此时最大的屏幕为750px...原创 2019-08-01 21:29:57 · 994 阅读 · 0 评论 -
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下:<!-- 申报手机号 --> <div class="phonea"> <span>申报手机号</span> <input class="pho...原创 2019-08-01 21:50:12 · 10973 阅读 · 1 评论 -
vue中使用富文本编辑器
vue中使用富文本编辑器vue中会经常用到富文本编辑器,今天遇到一个问题,想要点击按钮显示富文本编辑器,在网上找了很多都不合适不能进行有效的显示,今天跟大家分享简单快速的方法操作富文本编辑器无论是vue-cli3.0还是vue-cli2.0都可以进行操作GitHub ------- https://github.com/surmon-china/vue-quill-editor打开页面...原创 2019-08-13 19:47:26 · 3317 阅读 · 0 评论 -
vue中将后台返回的数字转换成对应的文字
vue中将后台返回的数字转换成对应的文字今天遇到一个问题就是性别一栏后台返回我的是数字,但是前端展示的是汉字男女,而且0,1,2,对应不同的汉字,下面跟大家分享一下我的方法首先用map遍历后台返回的数据利用里面的回调对数据进行解析即可,下面直接上代码 this.usersData.map(function (val) { if (val.gender == 0) { ...原创 2019-08-14 22:00:13 · 20291 阅读 · 5 评论