耶喽川水 2022-02-28 17:27 采纳率: 33.3%
浏览 42
已结题

请问怎么把计时显示到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

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-02-28 17:39
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 3月8日
  • 已采纳回答 2月28日
  • 创建了问题 2月28日

悬赏问题

  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题