代码题:实现发送验证码
要求:
- 点击按钮之前,显示发送
- 点击按钮之后,开始60秒倒计时
- 60秒倒计时结束,显示发送
我是这样写的:
<div id='app'>
<button @click="btn" :disabled="flag">{{msg}}</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "发送",
flag: false,
num: 60
}
},
methods: {
btn() {
let timer = setInterval(() => {
this.flag = true
this.msg = this.num--
if (this.msg == 0) {
clearInterval(timer)
this.msg = "发送"
this.flag = false
}
}, 1000)
}
},
})
app.mount('#app')
</script>
浏览器缓存机制
参考 浏览器缓存机制详解_卖菜的小白的博客-CSDN博客_浏览器缓存
补充浏览器缓存是自发的(如果有错请纠正)
虚拟DOM的原理
虚拟DOM是通过js对象的结构来记录html标签节点,当组件数据更新渲染视图时,先diff算法计算变化前后js对象(也就是虚拟DOM树)结构的不同,得到最小差异,然后针对性的更新部分真是DOM节点,这样可以极大地提高视图渲染效率,节省内存消耗。
css隐藏元素的方法
参考 CSS中隐藏页面元素的几种方式和区别_测试界的飘柔的博客-CSDN博客_css隐藏元素的三种方法
什么是脱离文档流
参考 脱离文档流和半脱离文档流(详解)_大前端工程师的博客-CSDN博客_脱离文档流
以上仅为个人经验,如有错误请指正,希望对各位有帮助。