vue中多个倒计时实现代码示例

这是效果图。今天我想说的是实现下面的倒计时

很多时候我们只有一个倒计时的情况很多，比较简单，只需要一个定时器setInterval，计算赋值就好。

但是当我们需要多次倒计时时，我们应该考虑将倒计时打包成一种常用的方法

以我自己的vue项目为例

！-template-div v-for=' list ' : key=' index ' class=' act _ item ' h1 { { item . title } }/h1 img 3360 src=' http 3360 item . pic ' alt=' div class=' act _ info ' H2 span { { item . count } }/span videos/H2 div class=' time '倒计时：{ { item . DJs } }/div class=' clear '/div/div script function InitTime(end time)var time=parsent(end time)-新日期()。getTime()；if(time=0){ return ' end ' } else { DD=math。楼层(时间/60/60/24)；hh=Math.floor((时间/60/60)% 24)；mm=Math.floor((时间/60)% 60)；ss=Math.floor(时间% 60)；var str=DD ' days ' hh ' hours ' mm ' min ' ss ' seconds '；返回字符串；} } export default { data(){ return { active : ' tab-container 1 '，pinkfont3360 true，//上拉刷新，下拉加载allLoaded: false，//如果为true，则禁止上拉Auto fill : false。//取消自动填充，list: []，}，created(){ varssss=[{ ' title ' : '小愿望，大梦想'，' pic' : '././assets/img/new/。计数' :' 34 '，'时间' :' 1525293470350'}，{ '标题' : '童模杭州国际时装周招募'，' PIC' : '././Assets/IMG/New/act2 . jpg ' Time ' : ' 1525293470350 ' }，{'Title' :' Monster bobo当红于杭城联合秀招募童模！' pic' : '././assets/img/new/act3.jpg '，' count' :' 74 '，' time' :' 1529253270350'}，{'title' : '汉风与唐韵Pic' : '././assets/img/new/act2.jpg '，' count' :' 266 '，' time' :' 1525753270350'}，{'title' : '听说你想和明星一起当超模。' pic': '././assets/img/new/act1.jpg '，' count':'97 '，' time':'1525253270450'}，]；ssss.map((obj，index)={ this。$set(obj，' djs '，init time(obj . time))；})this . list=SSSS；}，mounted(){ setInterval(()={ for(var key in this . list){ var AAA=parsent(this . list[key][' time '])；var bbb=新日期()。getTime()；var right time=AAA-BBB；if(right time 0){ var DD=math . floor(right time/1000/60/60/24)；var hh=math . floor((right time/1000/60/60)% 24；var mm=math . floor((right time/1000/60)% 60)；var ss=math . floor((right time/1000)% 60)；} this . list[key][' DJ ']=DD ' days ' hh ' hours ' mm ' min ' ss ' seconds '；} }, 1000);}，methods : { }/script要注意这一点。$ set (obj，' djs '，inittime (obj.time)代码。如果一个对象已经存在，如果此时对象中没有DJs元素，直接赋值对象是不正确的，djs='待赋值'，可能导致赋值成功。

这个。$set(对象，“djs”，“要分配的值”)；

以上是边肖介绍的vue中多重倒计时的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！