Vue中添加自定义函数

在做vue项目的时候难免会自己写一些特定需求的函数，那么如何在vue中添加自定义函数呢。

我的方法是在main.js中写入：

        Vue.prototype.xxxx(自己定义的方法名)= function (){

            #  逻辑

        }；

在页面就可以用this.xxxx来调用自定义函数了。

如我们在vue中经常使用的axios库，可以在main.js中这样定义:Vue.prototype.$http=axios；这样在组件中就可以使用this.$http来进行相应 *** 作。

利用vue+定时器实现一个竖排列表每条滚动的效果，废话不多说，先上动效

1.我们设置一个定时器，没过一段时间使盒子中的ul整体上移一个li的高度，因此需要改变ul的margin-top样式，我们先设置一个状态为动画开关和一个数据列表。

2.给我们需要加动画的列表设置动态样式，当开关animate为true时改变margin-top的值。

5.我们为组件设置完成动画需要的样式

4.接下来我们封装一个方法showMarquee，在创建dom节点每两秒调用一次该函数，由于列表过短会导致动效不好看，所以在调用定时器之前可以对数组长度进行判断，自行修改。函数体为在调用之后先让ul上移，过500毫秒之后执行一次动画停止，在停止期间 *** 作数据列表，将列表第一项push给列表最后一项，再删除第一项，保证列表可以循环滚动。

在获取列表之后调用即可

如果需要直接复制粘贴整体思路即可，样式列表能根据需求而定，亲测好用！！

data(){

    return {

        intervalId:null    }

},methods:{

  // 定时刷新数据函数    dataRefreh() {

      // 计时器正在进行中，退出函数      if (this.intervalId != null) {

        return

      }

      // 计时器为空， *** 作      this.intervalId = setInterval(() =>{

        console.log("刷新" + new Date())

        this.initData()//加载数据函数      }, 5000)

    },

    // 停止定时器    clear() {

      clearInterval(this.intervalId)//清除计时器      this.intervalId = null//设置为null    },

},created(){

    this.dataRefreh()

},destroyed(){

    // 在页面销毁后，清除计时器    this.clear()

}

原地址：https://www.cnblogs.com/aurora-ql/p/13300202.html

---