<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>
请问怎么把计时显示到input输入框上?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化
- ¥15 Tableau online 嵌入ppt失败
- ¥100 支付宝网页转账系统不识别账号
- ¥15 基于单片机的靶位控制系统
- ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
- ¥15 下图接收小电路,谁知道原理
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度