Question

我首先要说的是我对Vue真的很陌生。我按照教程完成了一个项目，这是我到目前为止自己完成的第一个项目。

我正在构建一个简单的页面来显示两个团队之间的分数。分数是从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);
    }
});

有人可以帮我实施点票功能吗？

Answer 1

使用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>

Answer 2

如果有人将来需要，我只想分享

模板：

  <div class="col-md-4 mb-4">
            <div class="row">
            <div class="col-6 pr-0">
                <h4 class="display-4 text-right mb-0 count1">
                    <ICountUp
                        :delay="customer.delay"
                        :endVal="customer.endVal"
                        :options="customer.options"
                        @ready="onReadyCustomers"
                    />
                </h4>
            </div>

            <div class="col-6">
                <p class="text-uppercase font-weight-normal mb-1">Customers</p>
                <p class="mb-0"><i class="fas fa-user fa-2x mb-0"></i></p>
            </div>
            </div>
        </div>

JS：

import ICountUp from 'vue-countup-v2';
export default {
    name: 'members',
    components: {
    ICountUp
    },
    data() {
        return {
            customer:{
                delay: 1000,
                endVal: 120500,
                options: {
                    useEasing: true,
                    useGrouping: true,
                    separator: ',',
                    decimal: '.',
                    prefix: '',
                    suffix: ''
                }
            },                
        };
    },
    methods: {
        onReadyCustomers: function(instance, CountUp) {
            const that = this.customer;
            instance.update(that.endVal + 100); //onReadyProjects
        }
    }
};

在Vue中使用CountUp

2 个答案: