计数器案例


Vue计数器案例

模板中创建变量,因为计数器是能变化的,需要一个变量

Vue.createApp({
        template: '<div>{{counter}}</div>'
    }).mount("#app")

现在我们只是在模板创建了 counter 这个变量,但是没有声明,声明这个变量需要在 data( ) 函数中,具体代码如下.

 data() {
    return {
       counter: 1
   }
 },

也许你现在还不能完全明白这段代码的意思,这不要紧,前几节课你只要跟着敲.得到结果就好。写到这里,你可以双击文件打开,在浏览器中看一下效果。

<body>
    <div id="app"></div>
</body>
<script>
   Vue.createApp({
        data(){
           return{
               counter:1
          }
       },
      mounted(){//页面一加载完就自动运行(刷新)(钩子函数)
           // console.log('111111111111')
          setInterval(()=>{
              // this.counter+=1
               this.$data.counter+=1  
           },1000)
        },
       template:'<div>{{counter}}</div>'
   }).mount("#app")
 </script>


文章作者: Bibooo
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Bibooo !
评论
  目录