![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
青衫折扇
互联网发展迅速,使我们的脚步更快,生活更好,环境变差,使人变得懒惰,有压力才会 让自己变得更强...
展开
-
js 单数组重组多维数组每3条为一组(几条为一组可自定义)
来实现将每三条数据重组为一个数组的功能。可以使用 JavaScript 中的数组方法。有什么问题可加入qq群交流:712627337。原创 2023-03-30 12:22:00 · 1050 阅读 · 0 评论 -
JS 根据数组对象中某个字段的值,重组新的数组对象
希望重组得到下面这个数据结构。现在要处理的数组对象。原创 2022-10-12 10:20:12 · 1879 阅读 · 0 评论 -
js 数组指定对象移动到第一位(两种方法)
js 数组指定对象移动到第一位(两种方法)原创 2022-07-05 13:58:33 · 6310 阅读 · 0 评论 -
uni-app处理数组根据时间重组
数组根据时间重组原创 2022-06-02 14:31:24 · 510 阅读 · 1 评论 -
uni-app 处理数组(将一维数组转二维数组)
这里我们先看结果一维数组处理结果以下是处理代码let newArr = []; for (var i = 0; i < this.imgList.length; i += 2) { newArr.push(this.imgList.slice(i, i + 2)) } console.log(newArr)如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序...原创 2022-04-15 12:21:09 · 1471 阅读 · 0 评论 -
uni-app 数组获取根据条件获取第一个元素(find)
直接上代码let obj = this.list.find(data => { if(data.id === this.isIndex) { return data } }) console.log(obj)原创 2021-12-17 16:03:10 · 3196 阅读 · 0 评论 -
uni-app 接收网址参数
onLoad(options) { let params = this.getRequestParams(); let mobile = params['mobile']; // 参数名 console.log(mobile ) }, methods: { // 获取utl参数 getRequestParams() { let url = location.href; let requestParams = {}; if (url.indexO.原创 2021-11-23 13:48:56 · 1878 阅读 · 0 评论 -
vue实现获取验证码倒计时效果
HTML部分:<span v-show="show" @click="getCode">获取验证码</span><span v-show="!show" class="count">{{count}} s</span>JS部分:data(){return {show: true,count: '',timer: null,}},methods:{getCode(){const TIM...原创 2020-06-04 09:30:06 · 249 阅读 · 0 评论 -
vue对银行卡,手机号,姓名,身份证进行加密保护用*代替
<div id="app"> <ul> <li v-for="item in num">{{item | hideMiddle}}</li> </ul> </div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript"&.原创 2020-06-01 17:43:17 · 2920 阅读 · 0 评论 -
js实现排行榜(根据我微信小程序项目所分享)完整版
首先我们来看一下效果我先说一下自己的思路吧一个模拟hotList列表数据,因为是小说根据当前小说人气进行排序,本次分享仅供参考,根据自己的需求去实现自己的排序好了废话不多说,来看看代码吧wxml<view class="hot-list"> <view class="books" wx:for="{{hotList}}" wx:key="inde...原创 2020-04-22 14:32:14 · 3862 阅读 · 4 评论 -
vue.js实现砍价进度条(超详细)
很简单,我们这里直接上代码了,亲测可用主要代码:<progress v-bind:value="cuts" max="100" class="cut_progress"></progress>progress 标签<div class="cut_ope"> <progress v-bind:value="cuts" max="100...原创 2020-03-26 14:40:10 · 904 阅读 · 1 评论 -
基于vue实现倒计时功能 天 /时/分/秒 / / 时/分秒
其实很简单,这里就直接上代码了,都写好注释了天/时/分/秒//倒计时 countTime: function() { // 定义结束时间戳 const end = Date.parse(new Date('2020-1-12 10:10:10')) // 定义当前时间戳 const now = Date.parse(new Date()...原创 2019-12-30 11:14:44 · 5206 阅读 · 6 评论 -
基于vue实现移动端tab切换方式
废话不多说了,这种方法比较灵活, 简单思路1: 创建导航组件2: 创建子组件3: 配置子组件路由接下我们来看一下代码吧导航组建<template> <div> <!-- 头部 --> <header id="header"> <div class="pure-box flex-box-x"&g...原创 2019-12-26 09:53:17 · 1922 阅读 · 0 评论 -
关于vue中使用windows.open()
1:windows.open('url') 在新窗口打开2:location.href = 'url' 在同窗口打开根据自己项目需求来跳转,希望对大家有帮助,有什么问题欢迎下方留言 + 关注...原创 2019-12-16 14:01:29 · 15042 阅读 · 1 评论 -
vue+mint-ui 实现省市区三联动效果
最近做项目,需要实现一个省市县三级联动的效果下载一个json数据文件,百度有很多,这里就不仔细说了先来张效果图接下来我们开始写代码吧1: 在项目中安装Mint-UInpm i mint-ui --save2: 在mian.js配置mint-ui// 地区省市区三联动引入import MintUI from 'mint-ui'import 'mint-ui/...原创 2019-12-12 11:02:05 · 746 阅读 · 0 评论 -
基于vue实现单页长时间不操作自动退出登录清除token,返回登录页
首先创建一个astrict.js//单页长时间不操作就会自动退出var lastTime = new Date().getTime()var currentTime = new Date().getTime()var timeOut = 1 * 60 *1000 //设置超时时间: 30分window.onload = function() { window.document...原创 2019-12-10 16:07:34 · 4168 阅读 · 6 评论 -
基于Vue好用的图片查看插件
在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览。在网上找到了一款很好用的插件。拿来即用,不需要复杂的配置。这里只是针对于在vue脚手架下的使用方法1、安装依赖包。npm install v-viewer --save2、在main.js中配置如下: import Viewer from 'v-viewer'import 'viewerjs/dist/viewer....原创 2019-12-09 11:03:56 · 657 阅读 · 0 评论 -
基于Vue的移动端图片查看插件
wc-view移动端图片浏览插件安装npm i wc-view --save-dev使用import wcView from 'wc-view';import 'wc-view/style.css';Vue.use(wcView);img 标签时: <img class="wc-preview-img" :src="url" v-for="(url, in...原创 2019-12-09 10:32:09 · 926 阅读 · 0 评论 -
vue全局前置,判断用户是否登录
说白了就是路由拦截,点击一个路由,判断一下是否为登录状态,如果是登录状态跳转到首页或其他页面,如果不是登录状态就跳转到登录页面思路就这么简单,接下来看看代码吧index.js//导航守卫// 使用router.beforeEach注册一个全局前置守卫,判断用户是否登录router.beforeEach((to, from, next) => { if (to.matche...原创 2019-12-05 09:11:44 · 1734 阅读 · 0 评论 -
vue实现不循环切换点击状态
其实很简单,这里就不费话了html<!-- 切换 --><article class="tabs"> <template > <div class="items"><span :class="{active: shows == 1}" @click="newest">最新</span></div&...原创 2019-12-02 16:02:56 · 541 阅读 · 0 评论 -
在vue中如何获取token,并将token写进header
跨域问题这里就不多说了,直接进入今天正题:login.vueexport default { name: 'login', data() { return { phone: '', password: '', device_type: '', // registration_id: '', //极光推送 用户设备唯一标识 注册ID t...原创 2019-11-26 17:13:50 · 4619 阅读 · 0 评论 -
vue中使用vue-awesome-swiper实现图片轮播效果(超详细解析)
首先我们先了解一下vue-awesome-swiper什么是vue-awesome-swiper?Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果.安装:npm install vue-awesome-swiper ...原创 2019-11-21 10:07:15 · 7175 阅读 · 1 评论 -
vue实现图片切换效果
思路:整个代码部分分为轮播图片和控制span两个部分。按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单,作为练手就不搞那么复杂了。先写出整体代码框架:<div id="banner" class="slide" style="padding-top: 5px;"> <div v-for="(...原创 2019-11-20 10:32:37 · 5138 阅读 · 0 评论 -
vue中公共组件在部分组件中显示
场景导航条只在除登录注册以外以及特殊页面显示;公共组件在部分页面显示,部分页面不显示。方法:router-view结合$route.meta代码:项目中App.vue<template> <div id="app"> <div v-if="!$route.meta.show"> <router-view/>...原创 2019-11-19 15:39:39 · 741 阅读 · 0 评论 -
基于Vue实现active点击切换样式
1. html<footer class="footer" id="footer"> <div class="item" v-for="(item, index) in footerList" :key="index" :class="{'active': currentSort==index}" @click="active(index)"> &l...原创 2019-11-18 14:49:24 · 1763 阅读 · 0 评论 -
简单实现轮播图片切换效果(基于vue)
思路:一: 将vue的框架封装在function中,在界面刷新时调用,将要轮播的图片存放在data中,还有下面的列表也分别保存在data中的一个数组中,然后每隔一段时间进行自动切换的函数写在methods中,注意函数要调用的话,就要在生命周期函数中调用,不然的话就没有用,点击这里了解生命周期函数详细知识。二: 认识到这里需要的是setinterval()、而不是setimeout()函数:...原创 2019-11-17 19:22:33 · 4810 阅读 · 1 评论 -
vue实现分页功能jiexi
首先我们先定义好分页效果<div class="common-seo-page-box clearfix align-center assist"> <ul class="page-center"> <li v-if="currentPage>0"><a v-on:click="prePage">上一页</a>&l...原创 2019-11-12 10:38:22 · 289 阅读 · 0 评论 -
vue实现移入移出事件
移入显示,移出隐藏,废话不多说直接上代码<ul class="tab-ul"> <li v-for="(item, index) in labelShows" :key="index" @mouseenter="enter(index)" @mouseleave="leave()"> <router-link :to="{name: 'topic', qu...原创 2019-11-09 14:57:53 · 4536 阅读 · 0 评论 -
vue项目修改浏览器图标以及标题
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标.目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件。然后去index.html在head下添加:<link rel="icon" href="static/im......原创 2019-09-20 16:18:03 · 16959 阅读 · 8 评论 -
基于vue轮播效果
这里废话不多说了,直接上代码,提供参考:<template> <div class="slider"> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"> <li...原创 2019-09-18 14:10:21 · 188 阅读 · 0 评论 -
Vue.js之侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。例如:<div id="watch-example"> <p> Ask a yes/no question: <input...原创 2019-08-05 17:18:39 · 214 阅读 · 0 评论 -
vue如何新建一个项目(超详细步骤)
一:项目初始化第一步:安装vue-clicnpm install vue-cli -g //全局安装 vue-cli查看vue-cli是否成功,不能检查vue-cli,需要检查vue选定路径,新建vue项目,这里我是在桌面上新建了sun文件夹,cd目录路径下面我一项目名为sell新建vue项目vue init webpack ”项目...原创 2019-08-03 11:49:25 · 2248 阅读 · 0 评论 -
vue.js 之node.js安装/淘宝NPM镜像安装
node.js镜像下载地址:http://nodejs.cn/download/双击镜像进入到Finish结束安装完成之后(win + r)打开(cmd)命令输入:node -v 检查node是否安装成功,出现版权就是成功,然后再输入npm -v查看npm版本使用淘宝NPM 镜像大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜...原创 2019-08-03 11:21:38 · 192 阅读 · 0 评论