源码之家网站模板,健身器材网站模板,宁波seo推荐优化,移动网站开发百度百科效果展示#xff1a; 时钟 写在前面#xff1a;vue2有this指向#xff0c;没有箭头函数
实验操作#xff1a;封装一个时钟组件 uniapp vue2 封装一个时钟组件 核心代码#xff1a; this指向的错误代码#xff0c;在下#xff1a; start() { this.myTimer setInterval(…效果展示 时钟 写在前面vue2有this指向没有箭头函数
实验操作封装一个时钟组件 uniapp vue2 封装一个时钟组件 核心代码 this指向的错误代码在下 start() { this.myTimer setInterval(function () { this.handleReTimer();//通过this调用失败。 }, 1000); }, 时钟组件代码
templateview classmyTimer_homeview classtimerTitleBox同步时间/viewview classtimerDateBox{{ timerDate }}/viewview classtimerTimeBox{{ timerTime }}/viewview classtimerRefreshImgBox clickhandleReTimerimagesrc/static/images/smartCabin/titleNav/refresh_icon.pngalt一张图//view/view
/template
script
import { getNowFormatDate, getNowData } from /utils;
//获取当前日期
function getNowFormatDate() {let date new Date(),year date.getFullYear(), //获取完整的年份(4位)month date.getMonth() 1, //获取当前月份(0-11,0代表1月)strDate date.getDate(); // 获取当前日(1-31)if (month 10) month 0${month}; // 如果月份是个位数在前面补0if (strDate 10) strDate 0${strDate}; // 如果日是个位数在前面补0return ${year}-${month}-${strDate};
}
//获取当前时间
function getNowData() {var a new Date();var b a.getHours();var c a.getMinutes();var d a.getSeconds();function check(val) {if (val 10) {return 0 val;} else {return val;}}return check(b) : check(c) : check(d);
}
export default {data() {return {myTimer: null,timerDate: ,timerTime: ,};},methods: {handleReTimer() {this.timerDate getNowFormatDate();this.timerTime getNowData();},start() {this.myTimer setInterval(this.handleReTimer, 1000);},},created() {this.start();this.handleReTimer();},destroyed() {clearInterval(this.myTimer);},
};
/script
style langscss scoped
.myTimer_home {width: 94%;height: 100%;font-size: 32rpx;display: flex;align-items: center;.timerDateBox {margin-right: 10px;}.timerRefreshImgBox {margin-left: 10px;display: flex;justify-content: center;align-items: center;:hover {cursor: pointer;}image {width: 40rpx;height: 40rpx;}}
}
/style 时钟组件(Vue3) 封装组件代码
script setup
import { useUserStore } from /stores;
const store useUserStore();
import { getNowFormatDate, getNowData } from /utils/replaceTime.js;
import { computed, onMounted, onUnmounted, reactive, watch } from vue;
import { getAssetsFile, numToStriTime } from /utils;onMounted(() {data.timerDate getNowFormatDate();data.timerTime getNowData();
});
const myTimer setInterval(() {data.timerTime getNowData();
}, 60000);
onUnmounted(() {clearInterval(myTimer);
});
const data reactive({timerDate: ,timerTime: ,
});
const handleReTimer () {data.timerDate getNowFormatDate();data.timerTime getNowData();
};
/scripttemplatediv classmyTimer_bomediv classtimerTitleBox同步时间/divdiv classtimerDateBox{{ data.timerDate }}/divdiv classtimerTimeBox{{ data.timerTime }}/divdiv classtimerRefreshImgBox clickhandleReTimerimg:srcgetAssetsFile(smartCabin/titleNav/refresh_icon.png)alt一张图//div/div
/templatestyle langless scoped
.myTimer_bome {width: 100%;height: 100%;font-size: calc(100vw * 18 / 1920);color: rgba(74, 79, 87, 1);display: flex;align-items: center;.timerDateBox {margin-right: 10px;}.timerRefreshImgBox {margin-left: 10px;display: flex;justify-content: center;align-items: center;:hover {cursor: pointer;}img {width: 20px;height: 20px;}}
}
/style
