Vuejs：如何将 vue js prop 值作为值传递给 html 的属性？答案

【问题标题】：Vuejs: How can I pass vue js prop value to attribute of html as a value?Vuejs：如何将 vue js prop 值作为值传递给 html 的属性？
【发布时间】：2019-04-24 12:52:57
【问题描述】：

我想在 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 中的上述属性截止日期。

【问题讨论】：

使用 :deadline="remaining_time"
只是确保；你的括号有错字，看到提供的答案对你不起作用。

标签： javascript vue.js vuejs2 vue-component countdowntimer

【解决方案1】：

没错，

<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

【讨论】：

谢谢兄弟，当我在这个截止日期内过了几秒时它可以工作1：now.add(10, 's').format(fmt)。我怎样才能通过完整的截止日期？

【解决方案2】：

你必须将它绑定到属性：

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

或者简单地说：

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

【讨论】：