石家庄网站建设seo公司哪家好,网站 dns 解析,网站的营销策略,临沂法律网站开发公司在前端开发学习中#xff0c;用JavaScript脚本写个数字时钟是很常见的案例#xff0c;也没什么难度。今天有时间#xff0c;于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事#xff0c;没想到却卡在两个问题上#xff0c;一个问题通过别人的博文已经找到答案用JavaScript脚本写个数字时钟是很常见的案例也没什么难度。今天有时间于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事没想到却卡在两个问题上一个问题通过别人的博文已经找到答案还有一个问题却还是不知道是什么原因造成的。
问题一 this指向的问题
mounted() {var _this this;setInterval(function () {_this.today new Date()}, 1000)
}在上面这段代码中我开始不太理解为什么要把 _this this感觉有点多此一举。于是便把这行代码弃了直接用this结果程序不能正常执行了。我知道是this的原因但是个中具体的缘由却说不明白。 后来在网上看到一篇博文把这个问题三言两语就说明白了非常感谢博主的分享。 我们要获取vue变量或方法的时候一般使用this但是在回调函数中this指向的就不是vue变量而是回调函数本身所以在一开始的时候先定义_thisthis这样在任何位置都可以用_this来获取vue变量或方法。 也就是说回调函数外的this指的是Vue对象回调函数内的this默认是指向回调函数了两者不相同这样_this this就不难理解了。
问题2 格式化时、分、秒的时候用了三目运算符分成两行写,程序可以正常运行合成一行写就是undefined。
1分成两行写正常运行代码如下效果如图。 var second this.today.getSeconds() second second 10 ? 0 second : second2合成一行写显示undefined,代码如下效果如下图。
var second this.today.getSeconds() 10 ? 0 second : second试了一下在javaScript中也是这样的我不清楚是什么原因造成的,是我的代码有错误吗或者三目运算符有什么要求
补充
昨天在三目运算符这里测试了半天没有找到原因今天又试了试发现之前的写法果然是错误的显示“undefined”的原因终于找到了。正确的写法如下 var second (second this.today.getSeconds()) 10 ? 0 second : second括号内是先声明变量并赋值(second this.today.getSeconds())赋值运算符优先级较低需要加括号。
用一行写结构比较复杂还不好理解不如分成两行写呢。 完整代码如下
!DOCTYPE html
html
headtitle实时显示的日期和时间/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idapp{{message}}sub-component v-ifshow/sub-componentbutton clickchange切换/button/divtemplate iddisplayTimediv{{dispTime() }}/div/template
/body
script typetext/javascriptconst SubComponent {template:#displayTime,data() {return {today: new Date(),}},methods: {dispTime() {var year this.today.getFullYear()var month this.today.getMonth() 1var date this.today.getDate()var hour this.today.getHours()hour hour 10 ? 0 hour : hourvar minute this.today.getMinutes();minute minute 10 ? 0 minute : minute// var second this.today.getSeconds() // second second 10 ? 0 second : secondvar second this.today.getSeconds() 10 ? 0 second : secondreturn ${year}年${month}月${date}日${hour}:${minute}:${second}}},mounted() {var _this this;var timer setInterval(function () {_this.today new Date()}, 1000)},//实例销毁之前调用beforeUnmount() {if (this.timer) {clearInterval(this.timer); //在Vue实例销毁前清除定时器}console.log(清除时钟)}}const RootComponent{data() {return {message: 数字时钟,show: true,}},methods: {change() {this.show !this.show}},components:{SubComponent,}}const vueApp Vue.createApp(RootComponent)vueApp.mount(#app)
/script
/html
