Vue中的状态动画

最新推荐文章于 2024-04-02 04:22:58 发布

六代目专机

最新推荐文章于 2024-04-02 04:22:58 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/Ghost__H/article/details/117717473

Vue 专栏收录该内容

28 篇文章

订阅专栏

1.状态动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Wolrd</title>
    <style></style>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          number: 1,
          animateNumber: 1,
        };
      },
      methods: {
        // 从1->10数字一个一个加
        handleClick() {
          this.number = 10;
          if (this.animateNumber < this.number) {
            const animation = setInterval(() => {
              this.animateNumber += 1;
              if (this.animateNumber === 10) {
                clearInterval(animation);
              }
            }, 100);
          }
        },
      },
      template: `
            <div>
                <div>{{animateNumber}}</div>
                <button @click="handleClick">增加</button>
            </div>
        `,
    });
    const vm = app.mount("#root");
  </script>
</html>