vue
A_Brave
这个作者很懒,什么都没留下…
展开
-
vue报错TypeError: Cannot read property ‘wechatName‘ of undefined
问题vue初始化页面渲染的时候出现以下错误问题原因默认的cardData是一个空对象,页面加载的时候cardData是空对象,没有wechatName属性,所以undefined.cardData是会报错的解决方案先判断对象是否为空,在进行属性判断,就完美的解决了!...原创 2021-06-20 10:58:33 · 246 阅读 · 0 评论 -
vue,uniapp改变属性值后视图不更新
问题uniapp项目中点击checkbox 复选框时值改变了,页面样式却没有改变数据结构点击打印的checkbox 值解决方案因为数据绑定层次太深,导致无法更新,触发checkboxChange方法的时候使用 this.$forceUpdate()进行强制刷新,问题就愉快的解决了 checkboxChange(key){ this.$forceUpdate() console.log(this.contents.addition[key].checked) },ps:原创 2021-06-03 12:47:13 · 1763 阅读 · 0 评论 -
vue 发起数据请求 传递的对象参数为空就删除当前属性
问题接口对接,传给后端的查询参数不能是空字符串(只传有值的属性),否则会查不到数据,因为双向数据绑定的原因会事先给个默认的空值,导致会查询不到数据。请求发送的数据解决方案在请求拦截器中循环判断请求数据对象data中的属性是否为空,如果为空就删除当前属性添加在之后打印出的请求数据,完美的解决了问题...原创 2021-05-20 14:37:38 · 2380 阅读 · 0 评论 -
js隐式转换问题记录
项目中发现用数字减去数字字符串没有被隐式转换,得到的结果是NaN如图:data.year是数字字符串,在第二行打印是可以被转换得到值的解决:当数字和字符串运算,要加一个()先进行计算在拼接或使用es6字符串语法转义,如上否则会先拼接在运算其实是一个简单的问题,刚开始咋一看感觉没问题,记录一下...原创 2021-05-06 12:59:38 · 94 阅读 · 0 评论 -
vue,js 执行字符串函数的方法
项目中遇到需要执行后台返回的js字符串函数可以使用eval()方法进行解析运行<template></template><script> export default{ data(){ return{ fun:'(function(){if(_this.planObj.grenn===0){return 10}else{return 11}})()', obj:{ green:0 } } }, create原创 2021-04-23 18:10:50 · 3513 阅读 · 0 评论 -
vue动态给对象添加属性视图不更新,this.$set()的使用
问题项目中遇到点击只给当前项添加样式的功能,因为涉及到默认样式和默认值的问题,需要在点击的时候给data中的对象添加新的属性和值,上图的按钮通过循环公用的一个view,通过判断当前项和赋值给this.planObj的属性值来进行样式的添加结果发现点击之后this.planObj之后属性和值已经成功添加 但是视图没有进行刷新,样式不会改变查找后发现vue只能监听到data中定义的属性更新数据,如果在方法里添加是监听不到的,可以使用this.$set()方法进行添加,它有三个参数:(添加的对象,要原创 2021-04-22 17:28:32 · 529 阅读 · 1 评论 -
vue下载blob 文件流
项目中有一个报表下载的功能,后端返回的不是下载地址,而是一个blob对象,项目中使用的是axios可以设置responseType的值为blob(不设置的话返回的是乱码)axios responseType值类型设置:没有设置:设置responseType:'blob’之后会得到一个对象:然后进行转换下载: const blob = new Blob([response]) var fileName = '我是文件名' const elink = doc原创 2021-04-19 15:39:27 · 553 阅读 · 0 评论 -
vue v-show切换显示多个循环列表 报错 Duplicate keys detected: ‘0‘. This may cause an update error
问题:项目中要切换显示多个列表数据遇到报错,检测到重复的键代码:默认key绑定的是索引值,执行的时候会全部加载一遍,只不过是隐藏了,用v-if试了一下还是显示检测到重复的键(v-if如果条件为假应该是不会加载执行循环的,不存在重复的键,突然想到v-if是放在后面了,于是放在循环的前面之后就没报错了,就不会执行了)问题解决了 ,但是用v-if开销比较大,因为要频繁的切换,于是想到了如下的解决方案:执行的时候每一项的index加上不同的数值就不会造成问题了,。...原创 2021-04-10 23:26:30 · 412 阅读 · 0 评论 -
url传递对象参数
url传递参数只能是string类型的,如果要传对象可先转为json字符串传递参数:接收到的打印结果:转换为json对象:打印结果:原创 2021-03-26 14:05:31 · 2550 阅读 · 0 评论 -
v-show不更新显示问题
问题做uniapp项目的时候遇到使用v-show进行图片的切换(显示隐藏)发现v-show绑定的值变为true的时候,当前元素不进行更新图片上传完成后赋值如上图 employeeForm.idCardReverse有值的话就显示当前值的图片 没值的话就显示默认图片。图片上传完成之后会给employeeForm.idCardReverse赋值。打印结果也显示成功赋值,但是上传之前的employeeForm.idCardReverse值显示的是undefined而不是一个空字符。于是寻找了一下原创 2021-03-26 10:06:07 · 1874 阅读 · 0 评论 -
vue短信验证倒计时效果
话不多说直接上代码:<template><div>{{text}}</div></template><script>export default{ data(){ return{ time:60, // 时间 text:'发送验证码' } }},methods:{ let aa = setInterval(() => { this.time -= 1; this.text = this.t原创 2021-03-11 14:05:17 · 122 阅读 · 0 评论 -
vue 中使用 QRCode.js 链接转二维码带中间图片
前言项目中需要一个链接转二维码的功能,找了一下 决定使用QRCode.js(很久以前的插件了)下载引入1.<div id="qrcode" ref="qrcode"></div>// 下载npm install --save qrcodejs2// 在需要的文件页面中引入import QRCode from 'qrcodejs2'使用2.// aa() 是你需要在哪里使用就调用 qrcode()aa(){ this.$nextTick(() => {原创 2020-12-16 18:22:20 · 2472 阅读 · 2 评论 -
vue重复点击导航相同路径报错
前言今天做vue项目突然发现点击同一导航菜单会报错错误1:错误2:当路径会变空,页面不会变初次点击:重复点击:原创 2020-12-16 11:11:46 · 612 阅读 · 0 评论 -
vue中配置请求参数FormData格式
有时候需要给后端传递的参数是FormData(表单)格式(默认是json格式)// 在main.js中配置如下代码axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' axios.defaults.transformRequest = [function (data) { let ret = '' for (const it in data) { ret += encodeUR原创 2020-12-06 23:11:17 · 2632 阅读 · 0 评论 -
vue 跨域代理配置 cli3 && cli2
vue cli3配置:在项目根目录新建vue.config.js文件 配置如下代码:module.exports = { devServer: { proxy: { '要代理根路径下的哪个': { target: '根路径', changeOrigin: true // 开启代理 } } }}vue cli2配置:在根目录找到config下的index.js文件 配置和cli3一样...原创 2020-12-06 23:00:28 · 225 阅读 · 0 评论 -
vue 调试工具 vue-devtools 下载即用
。。。手摸手带你安装vue调试工具1.下载压缩包后解压2.打开谷歌浏览器3.点击谷歌浏览器上面三个点找到 更多工具 > 扩展程序4.打开开发者模式5.点击加载已解压的扩展程序,选中之前解压的文件夹即可6. 下载链接...原创 2020-11-02 16:09:25 · 722 阅读 · 2 评论 -
vue时间倒计时功能
需求: 做一个剩余支付时间倒计时的效果效果图:代码:<template> <div>剩余支付时间:{{count}}</div></template><script>export default { data() { return { count: '', //倒计时 seconds: 864000 // 10天的秒数 } },原创 2020-10-23 14:48:40 · 1010 阅读 · 0 评论 -
element-ui 上传后隐藏上传框
功能:使用element图片上传n张之后隐藏上传框// 官网样式<template> <div> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handl原创 2020-08-11 18:16:02 · 3003 阅读 · 5 评论 -
element-ui 图片上传回显功能(点击修改显示图片,删除,放大)
需求:用element-ui做后台管理,碰到使用图片上传修改和删除功能,刚开始想点击修改显示放一个img标签,但是和上传成功后的图片框样式不对,还不显示删除放大功能。方案:查看文档发现,可以使用 file-list 绑定一个数组实现,具体如下代码:<template> <el-table label="操作" width="200"> <template slot-scope="scope"> <el-button type原创 2020-08-11 12:09:11 · 7199 阅读 · 3 评论 -
vue图片循环切换动画
需求: 页面加载图片进行切换,类似于gif效果 <div class="wallpaper-img"> <div> <img :src="img" alt=""> </div> export default { data() { return { imgList: [ { icon: 'https://timgsa.baidu.com/原创 2020-07-28 12:04:14 · 1961 阅读 · 2 评论 -
vue下拉显示返回顶部(淡入淡出)
功能:拖动滚动条到一定的距离显示返回顶部思路:1.先写一个返回顶部盒子,固定到页面的某个位置。隐藏元素2.监听滚动事件3.滚动到指定位置显示代码: <div class="return-top"> 返回顶部 </div>var top = document.querySelector('.return-top') // 获取元素加过度效果 (用ref也可以) window.addEventListener('scroll',(原创 2020-07-23 15:32:32 · 509 阅读 · 0 评论 -
vue返回顶部动画实现(由快到慢)
1.绑定点击事件2.编写滚动函数// 返回顶部 scollTop() { // 设置一个定时器 const upRoll = setInterval(() => { const top = document.documentElement.scrollTop // 每次获取页面被卷去的部分 const speed = top / 10 // 每次滚动多少 (步长值) if (document.documentEle原创 2020-07-17 11:12:23 · 1400 阅读 · 4 评论 -
vue 日期时间格式化
1.使用filters过滤器先初始化 年月日,时分秒2.在需要显示的地方调用就行了代码:filters:{ FormatDateTime: function(value) { let date = new Date(value); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? "0" + MM : MM; let d = date.getDate(); d = d &原创 2020-06-22 17:43:47 · 696 阅读 · 0 评论