題目描述vue做30s倒計時，在最后10s的時候有個放大的效果題目來源及自己的思路相關代碼// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）<template><div><p>{{second}}</p></div></template><script >export default {data () { return { seconds: 30
}
},
mounted () { this.add()
},methods: { num: function (n) { return n < 10 ? '0' + n : '' + n
}, add: function () { var _this = this
var time = window.setInterval(function () { if (_this.seconds === 0 ) {
_this.seconds = 0
} else if ( _this.seconds === 0) {
_this.seconds = 0
window.clearInterval(time)
} else {
_this.seconds -= 1
}
}, 1000)
}
},computed: { second: function () { return this.num(this.seconds)
},
}}</script>你期待的結果是什么？實際看到的錯誤信息又是什么？
1 回答
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
html
<p :class="{ zoom: isZoom }">{{second}}</p>js
data () { return { seconds: 30, isZoom: false
}},methods: {
num: function (n) { this.isZoom = n <= 10 && n > 0; return n < 10 ? '0' + n : '' + n
},
...
}css
.zoom { animation: test 1s infinite;
}
@keyframes test { from { font-size: 14px;
} to { font-size: 24px;
}
}- 1 回答
- 0 關注
- 597 瀏覽
添加回答
舉報
0/150
提交
取消