请问怎么把计时显示到input输入框上?

    <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="开始"  v-on:click="getnum"/>
        <input type="button" value="暂停"  v-on:click="closnum"/>
        <input type="text" name="" id="" value="" v-model="t"/>
    </div>
    <script>
        const App = {
            data() {
                return {
                    t:0
                }
            },
            methods:{
                getnum:function(){
                    var interval = setInterval(function(){
                        this. t=this. t++;
                        console.log(1)
                    },1000)
                    
                },
                closnum:function(){
                    clearInterval(interval)
                }
                
                
            }
            
                
            
        };
        Vue.createApp(App).mount('#app');
    </script>
</body>

img

this作用域有问题,function改为箭头函数就行了,而且this.t=this.t++改为this.t++,要不t永远是0不会变

                    var interval = setInterval(function(){
                        this. t=this. t++;
                        console.log(1)
                    },1000)

===》

<script src="https://unpkg.com/vue@next" data-v="3"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="开始" v-on:click="getnum" />
        <input type="button" value="暂停" v-on:click="closnum" />
        <input type="text" name="" id="" value="" v-model="t" />
    </div>
    <script>
        const App = {
            data() {
                return {
                    t: 0
                }
            },
            methods: {
                getnum: function () {
                    var interval = setInterval( ()=> {
                        this.t++;
                        console.log(1)
                    }, 1000)

                },
                closnum: function () {
                    clearInterval(interval)
                }


            }



        };
        Vue.createApp(App).mount('#app');
    </script>
</body>

img

文本框设置id,通过document.getElementById("id").value=设置的值

this.t 中间的空格去掉试试

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632