<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <!--小案例,标签实现逐渐透明--> <!--<h2 style="opacity: 0.5">欢迎学习Vue前端框架</h2>--> <h2 :style="{opacity}">欢迎学习Vue前端框架</h2> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false const vm = new Vue({ el:"#root", data(){ return{ opacity:1, } }, methods:{ }, // 生命周期函数 // Vue完成模板的解析,并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted mounted(){ // 定时器 setInterval(function(){ console.log(vm.opacity) vm.opacity -= 0.01 // 如果透明度变为0时,重新设置为1 if(vm.opacity <= 0){ vm.opacity = 1 } },20) // 简化定时器 // setInterval(()=>{ // // 这里的this是 Vue 实例对象 // console.log(this.opacity) // this.opacity -= 0.01 // // 如果透明度变为0时,重新设置为1 // if(this.opacity <= 0){ // this.opacity = 1 // } // },20) } }) </script> </body> </html>
标签:11,opacity,生命周期,log,0.01,vm,Vue From: https://www.cnblogs.com/REN-Murphy/p/18101983