Vue 相关插件安装

最新推荐文章于 2025-03-28 10:31:22 发布

原创最新推荐文章于 2025-03-28 10:31:22 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #插件

VUE 专栏收录该内容

117 篇文章

订阅专栏

本文介绍如何在Vue项目中使用vue-awesome-swiper插件实现上下轮播效果，并在悬停时停止滚动。同时，讲解了如何用JavaScript将当前时间转换为指定格式的时间戳，如'2019-02-04'。此外，还提供了Vue循环中点击事件处理的方法，用于在点击列表项时更新相关数据。

上下轮播，悬停后停止滚动
npm install vue-awesome-swiper --save
下载某插件
npm install jquery --save-dev
卸载某插件
npm uninstall lodash --save

时间戳转换“2019-02-04”
var date = new Date();
var current = date.getFullYear()+’-’+(date.getMonth()+1)+’-’+date.getDate();

变量字符串
获取了${id}

地址+变量
v-bind:href="‘http://baidu.com?id=’ + item.pro_description"

Vue循环，点击某个列，对应的其他内容跟着变化

//事件列表
<li v-for="(item, index) in eventList" :key="item.index"  @click="eventsClick" :data-id="item.code">
   <span>{{index+1}}</span>
   <span>{{item.address}}</span>
   <span>{{item.a_num ? item.a_num : item.b_num}}</span>   //a若为‘undefined’，则取b的值
 </li>

//点击事件
        eventsClick(e){
            let target = e.currentTarget;
            let code = target.dataset.id;    //让参数等于当前id
            this.getAddressEvent(code)   //传参
        },

//点击后
getAddressEvent(code){
     publics.aget("getRecentConflictProblemDetailList",{code: code}).then(data => 
         this.eventsAreaInof = data.data.conflictProblemList;
     });
 },