Question

我想对vuejs中的剩余时间显示一个计数器。我正在使用Vue的倒数计时器库。我想将剩余时间属性值传递给html代码的属性。

HTML：

<flip-countdown deadline=remaining_time></flip-countdown>

脚本：

<script>
import FlipCountdown from 'vue2-flip-countdown'
    export default {
        components: { FlipCountdown },
        props: ['id'],

        data(){
            return {
                 items:{},

                 remaining_time:"2019-12-25 00:00:00",


            }
        },
</script>

我想将上面的剩余时间作为值传递给html属性，但是此代码无法正常工作。请在html中指导如何将剩余时间值传递到上述属性截止日期。

Answer 1

您必须将其绑定到属性：

<flip-countdown v-bind:deadline="remaining_time"></flip-countdown>

或简单地：

<flip-countdown :deadline="remaining_time"></flip-countdown>

Answer 2

对，

<flip-countdown :deadline="remaining_time"></flip-countdown>

是正确答案。

请确保您在日期时间使用正确的格式 YYYY-MM-DD HH:mm:ss

这里是一个例子 https://github.com/philipjkim/vue2-flip-countdown/blob/master/demo/src/App.vue

Vuejs：如何将Vue js属性值传递给html属性作为值？

2 个答案: