日常总结
管理界的扫地僧
这个作者很懒,什么都没留下…
展开
-
在页面只显示6张图片
一.效果如下:二.思路如下:1.首先遍历后端传过来的进行遍历(这样图片可能不止六张)2.在获取数据进行判断 大于6做一个处理3.大于6的 更多要显示出来4.点击更多 在把其他的显示出来看到这个--------是不是想骂人--------这都是什么玩意--------三.上栗子:在页面上写代码: <div class="clearfix" style="display: flex; flex-wrap: wrap"> ..原创 2021-12-08 19:53:22 · 673 阅读 · 0 评论 -
vue |实现点击图片预览浏览器满屏大图
安装插件 npm install vue-directive-image-previewer -D 在main.js 引入插件 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-image-previewer/dist/assets/style.css'Vue.use(VueDirectiveImagePreviewer) 使用...原创 2021-12-08 19:00:04 · 813 阅读 · 0 评论 -
vue展示后端给的数据 显示问题
1.首先调接口获取数据2.在data里面定义一个新的字段3.做判断, if (判断条件){ this.新的字段=}4.在显示的位置 {{新的字段}}简单判断的代码如下:if ( this.datas.announces[0].offerPriceMin == 0 && this.datas.announces[0].isCustomOffer == 0 ) { this.cost =...原创 2021-12-07 09:52:07 · 1627 阅读 · 0 评论 -
vue中关于$event的理解
$event是指当前触发的是什么事件(鼠标事件,键盘事件等)$event.target则指的是事件触发的目标,即哪一个元素触发了事件,将直接获取该dom元素原创 2021-12-06 11:38:01 · 503 阅读 · 0 评论 -
谁动了我的数据
在工作中,我都没去改变它,它的值却变了。其实这个问题的原因很简单,就是这个数据是个引用类型而已。什么是引用类型在JavaScript中的数据有两种类型,一种是基本类型,一种是引用类型。基本类型的数据是存放在栈内存中的,而引用类型的数据是存放在堆内存中的。我们把一个引用类型的数据Object赋值给变量obj1时,变量obj1存放在栈内存中,数据Object存放在堆内存中。我们通过访问变量obj1时,栈内存中的变量obj1会去引用(访问)堆内存中的数据Object,故将数据Object称为引用.原创 2021-11-25 22:37:23 · 277 阅读 · 0 评论 -
前端对大数据处理方案,比如列表如何显示几万条数据
当后端一次性丢给你10万条数据, 作为前端工程师,要怎么处理?采用懒加载+分页(前端维护懒加载的数据分发和分页)初级工程师的方案:直接从后端请求数据, 渲染到页面的硬编码方案,思路如下:请求后端数据:fetch(`${SERVER_URL}/api/getMock`).then(res => res.json()).then(res => { if(res.state) { data = res.data setList(data) }}).原创 2021-09-25 09:34:25 · 5057 阅读 · 0 评论 -
VUE菜单权限、路由权限
方式1(路由钩子函数里判断)前端定义路由,配置好路由表,代码示例{ path: '/path', component: () => import('./component'), name: 'componentName', meta: { menuName:'菜单名称' auth: 'authCode' } } 在登录的时候后台会返回一串有原创 2021-09-25 10:08:09 · 3583 阅读 · 0 评论 -
如何快速同步原先设备上vscode的插件
原因:在新设备上重新装了vscode,然后发现原先设备上vscode里的好多插件都需要一个个搜索再下载下来,觉得很不方便,解决办法:1.在原先设备vscode上安装一个叫做Settings Sync的插件2.登录自己guthup网站,个人信息最下面 点击Settings3.点击左侧导航栏的Developer settings,如图4.点击Personal access tokens后点击Generate new token新增一个token,如图5.之后进入以下界面.原创 2021-08-20 22:44:42 · 747 阅读 · 3 评论 -
vue 四级导航以及验证码实现
实现效果:首先创建五个vue界面1.home.vue页面<template> <div id="home-wrapper"> <h1>{{ name }}</h1> <nav> <!-- 二级路由的出口 在一级路由的界面里面 --> <router-link to="/one">one</router-link> <router-l.原创 2021-07-12 19:39:23 · 404 阅读 · 18 评论 -
transform:translate(-50%,-50%)实现水平垂直居中
translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。当使用:top:50%;left:50%;, 是以左上角为原点,故不处于中心位置translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50...原创 2021-07-10 16:47:32 · 326 阅读 · 0 评论 -
vue 二级菜单制作
第一种方法,用命名路由传值代码如下:在绑定时<router-link:to="{name:'home1'}">小说首页</router-link><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <.原创 2021-07-09 22:38:28 · 1972 阅读 · 6 评论 -
vue 三种路由跳转方式
方式一:this.$router.push('/order/zh');方式二:this.$router.push({ name:'zh-order',//name这里指路由的名称 query:{ //这里是传递的参数 }})第三种方式:this.$router.push({ path: "/order/zh", //path是路径 params: { //这里是传递的参数 }});方式二和.原创 2021-07-09 15:10:55 · 471 阅读 · 0 评论 -
vue中的具名插槽和作用域插槽使用
1.具名插槽如果给组件内设置slotname组件标签内的内容都会显示出来如果我们想组件标签内的内容我们可以指定位置指定内容显示就需要给这些标签设置不同的插槽,就需要使用具名插槽例子如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=...原创 2021-07-07 19:43:17 · 573 阅读 · 0 评论 -
VUE列表内容显示与隐藏
效果如下:第一种方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &原创 2021-07-07 19:19:36 · 1410 阅读 · 0 评论 -
返回一个满足条件的数组
第一种方式:var a = [90,60,20,59,47,61,80] var b = a.filter(function(item){ return item > 70 }) console.log(b);第二种方式:var c = a.filter((item)=>{ return item > 70 })console.log(c);.原创 2021-07-07 11:08:36 · 872 阅读 · 0 评论 -
vue中打开app.vue组件代码是黑白的解决方案
下载一个vetur插件就可以了原创 2021-07-05 10:19:45 · 1260 阅读 · 3 评论 -
vue点击事件总结
@click.once="clickA" 只允许点击一次@click.stop="clickB" 阻止事件冒泡v-on:keyup.delete="clearFn" 点击delete键清空v-on:keyup.enter="clearFn" 点击enter键清空v-on:keyup.enter.65="teamFn" 使用组合键v-model.lazy.trim="msg" 清空前后的空格效果v-model.number="age" 将输入的值变为数字,...原创 2021-07-01 19:40:22 · 15736 阅读 · 0 评论 -
连接数据库,进行数据修改
//我们把它封装成模块// 导出 引用const mysql = require('mysql')module.exports=function(database = 'zh001'){ // 因为这里面的主机地址 用户名 密码 端口一般情况下都不会变 return mysql.createConnection({ // host:"127.0.0.1" host:"localhost", //主机地址 user:"root",.原创 2021-06-24 19:09:30 · 355 阅读 · 0 评论 -
node.js爬虫爬取数据 并渲染到页面
const express = require("express")const request = require("request")const fs = require('fs')// 后端 jQconst cheerio = require("cheerio")var app = express()// 后端没有window// 设置静态资源目录app.use(express.static(__dirname+"/public"))request({ url: 'http.原创 2021-06-21 17:00:56 · 635 阅读 · 0 评论 -
swiper插件做3D轮播
<link rel="stylesheet" href="../js/swiper.css"> <style> .swiper-container, .swiper-wrapper, img{ width: 320px; height: 200px; } </style></head><body> <.原创 2021-06-01 17:44:08 · 552 阅读 · 0 评论