vue 技巧
vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
onlylele
细节决定感知!
展开
-
js递归给每项添加字段和值
通过js递归循环根据指定条件给数组中的每项数据新增字段和值;原创 2024-04-30 09:24:19 · 371 阅读 · 0 评论 -
vue数组渲染改变一个内容无法即时渲染问题
通过vue中v-for 渲染的内容,当点击指定的某一项改变后,使其不请求后端,不刷新页面视图而直接改变数据展示;原创 2023-05-18 10:12:26 · 356 阅读 · 0 评论 -
uniApp 取安卓软键盘高度及设置
当手机输入内容时会弹出系统默认的软件盘,此时可能导致其他整体的页面内容上移而覆盖到工具栏或者软件盘直接覆盖了底部的部分内容;原创 2023-05-12 10:51:52 · 1612 阅读 · 0 评论 -
vue 父子组件之间传递参数(provide/inject)
注意:provide和inject需要一起使用;示例代码如下:1. 父组件中:设置传递给子组件的内容;// 父组件provide() { return { message: (data) => { return new Promise((resolve, reject) => { this.handleClickOptions('message', data, this.$refs.info.getCurrentInfo..原创 2021-05-27 15:54:36 · 685 阅读 · 0 评论 -
js 金额相关数据内容整除显示处理
需求:当金额数据大于10000时显示 'num万元' 否则显示 'num元';实现: filters: { totalMoney(totalM) { const floatMs = (totalM / 10000) % 1 === 0 ? (totalM / 10000) + '万元' : parseFloat(totalM / 10000).toFixed(2) + '万元' const floatMe = totalM % 1 === 0 ? (totalM +原创 2021-04-17 11:41:30 · 259 阅读 · 0 评论 -
KeepAlive 简单使用,及手动去除内容存储
项目需求:使用keep-alive实现项目中部分页面的存储功能,当关闭页面需求清除掉缓存,tab切换页面时需要保留内容进行缓存;问题:关闭后,重新打开页面,内容仍然存在,需要强制清除keep-alive保留的缓存内容;效果如下:实过程及思路:部分代码1、keep-alive使用保留缓存实现:router配置:或者 <keep-alive> <router-view v-if="$route.meta.keepalive" :key...原创 2020-09-12 18:42:24 · 1549 阅读 · 1 评论 -
表单内容改变 节流操作
一般情况下输入内容后,筛选对应的数据内容,如果每次输入每次请求过于频繁,使用节流的方式来减少请求的情况;watch: { 'params.search'(newVal,oldVal){ //添加空格不做处理 if(newVal.trim() == oldVal.trim()) return; // 输入框防抖 clearTimeout(this.debounceTimer); // 每次进来的时候都将之前的清除掉,如果还没到毫秒的时候就将之前的清除掉,原创 2020-09-08 19:18:28 · 190 阅读 · 0 评论 -
Vue/Js 递归函数封装:查询数组对象内容,合并至一个数组中
实现需求:把一个多维数组对象通过条件合并至一个数组中;如下图需求:递归代码封装实现:// 递归设置function setHandleListb(list) { const arr = []; let obj = {}; list.forEach(item => { const tmp = { ...item }; if(tmp.purview_tag){ if (tmp.children) {..原创 2020-09-02 15:57:17 · 2176 阅读 · 0 评论 -
vue 中结合vcharts实现手机端图表绘图
在手机端展示图表效果:实现代码如下:引入样式表:/vcharts/css/style.min.cssjs:/vcharts/js/echarts.min.js <!-- 营收趋势 柱形图 --> <div class="bg-white mtb-10"> <h2 class="bg-white plr-15 font-18...原创 2020-03-16 10:09:08 · 906 阅读 · 0 评论 -
vue 金额过滤设置保留小数2位
常用vue过滤器设置金额,保留小数位2位,如果是整数则没有小数;//html:{{total_maney|curreny}}//js: filters:{ curreny:function(data){ data = Number(data).toFixed(2); if(data==parseInt(data)){ ...原创 2019-12-13 19:36:38 · 5360 阅读 · 0 评论 -
vue + vant 地址设置编辑,默认展示及本地缓存设置;
使用vue 结合vant 组件 编辑地址时,如何让编辑的地址在选中的区域定位设置;结合本地缓存设置再编辑设置;1.html设置:引入区域js文件:areaList.js <div class="pt-15 plr-15 bg-white"> <h3 class="font-15 fon...原创 2019-12-06 10:37:15 · 3510 阅读 · 0 评论 -
vue input输入框 聚焦和失焦时内容处理
input输入框聚焦时,如果内容为0,让其置空处理;如果内容为空,在失焦时,让其为0处理;html:<input class="input-small-mt" @focus="focusPrice($event)" @blur="blurPrice($event)" v-model="i.purchase_price" type="text" />js: //文本聚...原创 2019-12-05 15:08:18 · 10707 阅读 · 0 评论 -
vue+js 从一个数组中删除在另一个数组中已存在对象;
数组,对象常用的删除方法:1、根据一个数组元素,删除另一个数组中的对象;var a = [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }];var b = [15, 3];a = a.filter(function (item) { return b.indexOf(item.id) < 0;})...原创 2019-12-03 09:30:13 · 3792 阅读 · 0 评论 -
vue+vant 组件图片上传自定义删除组件
使用vant组件中的图片上传功能,删除不完善,如何自己定义vant中图片上传功能的删除功能;1、html模板文件:css:.van-doc-demo-block__title {margin: 0;font-weight: 400;font-size: .14rem;color: rgba(69,90,100,.6);padding: .35rem .15rem .15rem;}....原创 2019-11-20 09:50:31 · 5542 阅读 · 0 评论 -
vue/js 弹性盒子布局内容超出‘按钮’控制左右滑动
javascript或者vue方法封装实现:某块内容水平超出范围,可使用左右按钮控制左右滑动显示隐藏的内容;html部分:<div class="item-evel posrev"> <div class="jtbox"> <div class="jtbox-div"> <ul class="jt-price"> &l...原创 2019-11-02 14:41:24 · 2377 阅读 · 0 评论 -
vue中RegExp 正则验证特殊字符或手机号及其他特殊内容;
vue中RegExp验证:1、判断文本框中用户输入的字符是否含有特殊符号(*/#$@),就像用户注册时密码框的填写。// 利用 RegExp 对象优雅实现: even(文本框内容)regDemo:function (even) { // 规则对象(flag) var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<&g...原创 2019-10-28 11:47:41 · 7606 阅读 · 0 评论 -
axios 请求 catch 断网或其他错误时处理
说明:vue使用时,当突然断网或其他原因造成数据加载错误时,axios方式的catch处理;//取出内容; getItems:function(kid){ var that = this; that.action='default'; that.loading = true; that.finished = false; that.isfi...原创 2019-10-28 11:13:55 · 3606 阅读 · 0 评论 -
vue 正则表达式方式获取头部地址栏参数值
1、获取地址形式:...?name=XXx&id=11;//获取地址栏参数,name:参数名称getUrlParms: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(...原创 2019-10-19 15:23:35 · 1146 阅读 · 0 评论 -
vue中上传图片转base64处理,并向后台发送处理...;
1. 上传图片时:pc端正常可以传多张图片;手机端只能一张一张上传;(可以完善);使用前端框架有:WeUi,vant ;style:/*改造上传图片 */.applay-uploadimg .weui-uploader__bd{ margin-bottom: 0;margin-right: 0; }.applay-uploadimg .weui-uploader__input-...原创 2018-12-14 17:06:20 · 10631 阅读 · 1 评论 -
vue 中 改表单select 的默认样式字体色;
html:<div class="van-field__body"> <select v-model="entity.role_id" @change="roleIdSelect" class="van-field__control partner-selc" :class="{'font-metud':selected}"> <...原创 2018-12-25 16:23:21 · 5949 阅读 · 0 评论 -
vue+axios 向后台发送请求和响应数据的总结;
1. GET:1》无参:案例:var that=this; that.loading = true; that.finished = false;axios.get('/api/items/news').then(function(res) { that.loading = false; that.finished = true; if (res.data.code == 0) { if...原创 2019-01-10 11:51:19 · 2336 阅读 · 0 评论 -
html + vue + axios 加载内容时默认骨架设置;
html:<template v-if="action == 'default'">{内容:}.....</template>......<template v-if="action == ''"> <div class="skeleton"><img src="http://caitaitai.cdn.ekweixin.co...原创 2019-02-15 16:16:37 · 785 阅读 · 0 评论 -
模仿淘宝多规格选择demo
1.模仿淘宝多规格选择demo ,说明:依赖文件:vant.css, vue.js, vant.js内容代码 详细情况:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>模拟淘宝多规格选择</title> <link rel...原创 2019-03-23 11:37:16 · 4354 阅读 · 0 评论 -
vue监听和计算属性的基本使用
1. 监听属性基本使用:html: <div>{{order.ship_money}}</div>js:data:{ order:{ship_money:0}, ship_money:'0'},//监听运费:watch: { 'order.ship_money': function(newVal,oldval){ ...原创 2019-09-05 11:05:49 · 289 阅读 · 0 评论 -
vant+vue 批量订货购车操作和布局,及删减功能等;
html:<?php$this->assign('title', SITE_NAME);$this->assign('css', $this->Html->css(['css', 'wechat/typescss']));$this->assign('js', $this->Html->script(['axios', 'wechatty...原创 2019-07-04 14:35:20 · 1845 阅读 · 0 评论 -
Vue 中对时间进行格式化处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-10 09:55:48 · 2778 阅读 · 0 评论 -
vue+vant+axios,实现购物车功能;
购物实现:1. 商品单件选择,2.单件商品数量增减操作,3. 单件商品的删除操作;4. 商品全选/取消全选功能;style:使用vant:改造:/*购物车*/.cars-header .passport-user {line-height: 32px;}.carts .van-card__footer {/*right: auto;*/top: 48px;pos...原创 2018-12-14 17:53:33 · 6824 阅读 · 1 评论 -
axios+vue+vant 上传照片大图控制质量大小的转换,并转base64 ,后台返回网站;
html:<!-- 身份证照片 --><div class="van-cell van-field"> <div class="van-cell__title"> <span>身份证照片</span> </div> <div class="van-cell__value f...原创 2018-12-25 16:07:49 · 2198 阅读 · 0 评论 -
vue 中监听和计算属性基本使用方法;
1. 监听属性基本使用:html: <div>{{order.ship_money}}</div>js:data:{ order:{ship_money:0}, ship_money:'0'},//监听运费:watch: { 'order.ship_money': function(newVal,oldval){ ...原创 2019-08-01 15:43:28 · 386 阅读 · 0 评论 -
vue + axios 中倒计时处理;
vue 外部函数处理:function InitTime(endtime){ var dd,hh,mm,ss = null; var time = parseInt(endtime) - parseInt(new Date().getTime()); /*console.log(endtime); console.log(new Date().getTime()...原创 2018-12-25 17:30:03 · 643 阅读 · 0 评论