在Vue中使用CountUp

我会先说我是Vue的新手。我在完成一个教程后完成了一个项目，这是迄今为止我自己完成的第一个项目。在Vue中使用CountUp

我正在构建一个简单的页面来显示两个团队之间的分数。评分是从API中提取的，我每5秒轮询一次，然后将每个团队的评分变量设置为每次从API检索到的分数。

我想动画这个来计算新的分数，并且在如何做到这一点上只是有点失落。

我发现countUp.js看起来非常好，但问题是我更新Vue变量而不是元素，所以我不知道如何做到这一点。

它看起来像有一个implementation for Vue，但从来没有使用npm我不知道我在做什么。

这里是我的app.js文件，其中包含我的Vue公司代码：

var vm = new Vue({ 

    el: '#liveCounter', 
    data: { 

     teamA: 0, 
     teamB: 0 
    }, 
    methods: { 
     loadData: function() { 
      this.$http.get('https://dummyapi.com/getScore)').then(function (response) { 
       this.teamA = response.body.teama.summary.score; 
       this.teamB = response.body.teamb.summary.score; 
       console.log('polled'); 
      }, function(response) { 
       //nothing 
      }); 
     }, 
    }, 

    mounted: function() { 
     this.loadData(); 

     setInterval(function() { 
      this.loadData(); 
     }.bind(this), 5000); 
    } 
});

有人可以帮我实现计数功能？

来源

2016-11-10 James

使用vue-countup需要做的事情很少。

首先在你的代码目录使用下面的命令来安装它：

npm install --save vue-countup

这将安装此并创建的package.json依赖项。

现在你要告诉Vue公司，你要使用的NPM库，您可以通过以下（可能在app.js或者已经导入Vue公司）做的事：

Vue.use(window.VueCountUp);

这个两后步骤你可以继续，并使用以下在您的模板：

<vuecountup class="myCounter" :end="teamB" :duration="2.5" :options="{useEasing : true, 
      useGrouping : true, 
      separator : ',', 
      decimal : '.', 
      prefix : '', 
      suffix : ''}"></vuecountup>

来源

2016-11-10 09:39:15 Saurabh

每次teamB更新，这将更新？ – James

这对我来说根本不起作用。我跟着你的步骤，并添加'Vue.use（window.VueCountUp）;'在我的模板内，因为这是我导入Vue但它只是空白的柜台应该是？控制台中没有错误？ – James

@James曾尝试' Saurabh

在Vue中使用CountUp

回答

相关问题