Vue中的状态动画

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

六代目专机

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

阅读量139

点赞数

分类专栏： Vue

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

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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>

六代目专机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的状态动画

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" />
复制链接

扫一扫