![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue-注意点
YY小怪兽
干饭了 干饭了
展开
-
V-model(如果直接修改v-model的值不会触发方法)
如果直接修改v-model的值不会触发方法search要自己手动调用 <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle="search"> directives: { //函数节流 监控输入框 提高性能 throttle: { // 指令的定义 inserted: function (el, obj) { let t原创 2022-03-21 14:34:00 · 967 阅读 · 0 评论 -
Vue-ondurationchange(监听歌曲是否已经加载完成)
详情可见问题:切换歌曲的时候歌曲时间有时候不会修改为正确的时间,那是因为 歌曲还未加载完成,只有歌曲加载完成之后才能获取到歌曲的总时长注意点: 在iOS中系统不会自动加载歌曲, 所以oncanplay不会自动执行 解决方案: 如何监听iOS中Audio的歌曲是否已经准备好了, 通过ondurationchange 事件来监听 ondurationchange事件什么时候执行: 当歌曲加载完成之后执行, 因为只有 歌曲加载完成之后才能获取到歌曲的总时长原创 2022-03-19 15:00:50 · 963 阅读 · 0 评论 -
Vue-$nextTick(在watch中获得要进行渲染的数据)
实现获得循环创建的ref <ul class="list-wrapper"> <li class="list-group" v-for="(value , index) in list" :key="index" ref="group"> </li> </ul>watch watch:{ list(){ //console.log(this.$refs.grou原创 2022-03-19 14:47:48 · 873 阅读 · 0 评论 -
Vue-模糊效果filter
通过filter来设置模糊度非常消耗性能,如果不断的修改会导致性能较差移动端不推荐使用filter来修改模糊度this.$refs.top.$el.style.filter=`blur(${scale}px)`如果想修改模糊度可以通过添加一个蒙版在需要模糊的元素上面,通过修改蒙版的透明度来起到模糊作用 <div class="mask" ref="mask"></div> .mask { position: absolute; background: #原创 2022-03-08 14:31:18 · 1144 阅读 · 0 评论 -
Vue-覆盖swiper的样式
在vue中需要修改swiper的小圆点之类的样式注意点只能在全局style修改错误做法(局部style 添加scoped)<style scoped lang="scss">.banner{ .swiper-pagination-bullet{ width: 16px; height: 16px; background: #fff; opacity: 1; }}正确做法(全局style 无scoped)<style lang="sc原创 2022-03-05 10:26:05 · 443 阅读 · 0 评论 -
Vue-Swiper解决轮播到最后一张停止
1.sipwer的bug,如果数据是从网络上获取的,那么自动轮播到最后一张就会停止2.解决方法在swiper组件上加上v-if="数据.length>0"<template> <swiper ref="mySwiper" :options="swiperOptions" class="banner" v-if="banners.length>0"> <swiper-slide v-for="value in banners" :key="value原创 2022-03-05 10:20:40 · 2675 阅读 · 0 评论