在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

回答

相關問題