![](https://img-blog.csdnimg.cn/20201120115505276.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue踩坑实记
可爱滴菜鸟
勤奋敲代码的程序员
展开
-
vue阻止触摸事件滚动穿透事件方法
触摸事件透过蒙层,改变了父组件的滚动条位置,添加这个就可阻止这一事件@touchmove.prevent原创 2021-04-15 17:46:17 · 1272 阅读 · 0 评论 -
vue高德地图API使用介绍,实现搜所标点功能
效果图功能实现:搜所查询标点,及标记拖拽事件1.安装插件API链接: https://developer.amap.com/api/javascript-api/reference/mapimport VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '你的key',//在官网注册个key //所需插件 plugin: [ 'AMap.PlaceSearch','AMap.A原创 2021-02-23 17:24:59 · 609 阅读 · 0 评论 -
vue-router的$route.replace使用及未生效原因
replace 与push的区别在于,replace的跳转的页面不会被记录路由记录中,在使用$route.go(),更方便!在使用replace未生效的原因:(1) replace是作用在本页的路由的(例如从home页跳转到index页,使用了$route.replace(’/index’),那么home页将不会记录在路由历史中!!!)...原创 2020-12-24 14:57:24 · 11094 阅读 · 0 评论 -
vue循环标签ref的值重复问题,获取ref为undefined
ref值重复,如何获取对应标签或组件正常使用vue 的 ref属性时使用$refs获取返回的是一个对象,对象包含组件内部信息.(例如 method中方法,及data中数据) //gauge 组件内部定义了个方法fun; <gauge :dataSource="arr" ref="gauge"/>//组件 this.$refs.gauge.fun();//通过$refs可以直接调用组件内部方法循环显示组件 ,导致ref ,重复,按照第一种方原创 2020-11-20 11:41:29 · 6476 阅读 · 3 评论 -
vue 定时器功能的实现 格式 00:00
通过判断各个变量的数值,进行秒转换为分钟,限时5分钟 <div> <span>{{dozensMin}}</span>//秒 <span>{{min}}</span> <span>:</span> <span>{{dozensSecond}}</span>原创 2020-11-13 18:02:55 · 433 阅读 · 0 评论 -
已知数组添加可被vue监听的属性 vue
有时再获取一个已有数据的对象或者数组时,仍需要为其添加所需的属性,需要使用$set方法进行添加,这样添加后的属性是可以被vue监听到的. return { list: [],//数组 } methods:{ setAttribute(){ for (let i = 0; i < _this.list.length; i++)原创 2020-11-13 17:05:34 · 285 阅读 · 0 评论 -
vue 动画的使用
将要设置动画的标签,放进transition标签内,给个name属性,module-enter-active :标签进入的动画(就是show=true 时的动画效果)此动画是从组件的高度0px,一直致最大高度的动画. //html <transition name="module"> <interval-random v-if="show" :type="type" @close="close"/>//组件 &l原创 2020-10-29 17:56:16 · 196 阅读 · 0 评论 -
vue 动态引入本地图片方法
直接使用 require(’…/…/…/assets/img/ie_bottom_data.png’)的方法引入图片.如果直接设置为 img: ‘…/…/…/assets/img/ie_bottom_data.png’ 会找不到该图片 <div v-for="(item,index) in navList" :key="index"> <img :src="item.img" @click="navClick(item)">原创 2020-10-26 16:20:44 · 857 阅读 · 0 评论 -
Echart绘制折线图,隐藏纵坐标
效果图如下:refreshDraw()方法保证,数据改变后,重新绘制折线图,否则不会刷新数据 methods: { getEchartData() { let eChart = this.$echarts.init(document.getElementById('eChart')); eChart.setOption({ legend: {show: true},原创 2020-09-24 17:57:52 · 2924 阅读 · 0 评论 -
vue使用定时器修改数据,页面未刷新!
今天在vue中使用定时器,修改data中的数据,页面不改变代码是这样的commonClick(index) { setTimeout(function () { this.count = this.count - 1; this.show = !this.show; }, 200); },修改this指向后,页面更新,**注意vue中this的指向问题!!!**萌新一个,哪里有问题原创 2020-09-17 16:41:50 · 1904 阅读 · 1 评论 -
vue 不能监听对象属性的改变
vue 不能监听对象属性的改变 需要重新赋值后才会渲染页面! <div v-for="(item,index) in commonList" :key="index" :class="active[index] ? 'activeClass' : 'noClass'" @click="commonClick(index)"> {{item}} </div>//方法commonClick(i原创 2020-09-17 12:55:39 · 929 阅读 · 0 评论