vue 使用updated生命周期修改html

最新推荐文章于 2025-09-02 09:49:24 发布

原创最新推荐文章于 2025-09-02 09:49:24 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

vuejs2.0 专栏收录该内容

27 篇文章

订阅专栏

Vue组件在data中变量改变并完成DOM更新后，会触发updated生命周期钩子。如果仅修改data而未影响页面显示，则updated不会被调用。

只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期，只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。

updated() {
    this.$nextTick(() => {
      this.changeNum();
    });
  },

methods: {
    node() {
    },
    // 页数修改
    pageSizeChange(size) {
      this.filter.page = 1;
      this.filter.pageSize = size;
      this.sendPageInfo();
    },
    // 翻页
    pageChange(current) {
      this.filter.page = current;
      this.sendPageInfo();
    },
    // 触发修改页数事件
    sendPageInfo() {
      this.$emit("on-change", this.filter);
    },
    init() {
      this.filter.page = 1;
    },
    initSize() {
      this.filter.pageSize = 20;
    },
    changeNum() {
      const totalDom = document.querySelector(".ivu-page-total");
      totalDom.innerHTML = "共*条";
      const createSpan = document.createElement("span");
      totalDom.onmouseover = () => {
        createSpan.className = "ivu-span";
        createSpan.innerHTML = `${this.total}`;
        document.querySelector(".ivu-page").appendChild(createSpan);
      };
      totalDom.onmouseout = () => {
        document.querySelector(".ivu-page").removeChild(createSpan);
      };
      const alls = document.querySelectorAll(".ivu-page-item");
      const arrs = Array.from(alls);
      for (let i = 0; i < arrs.length; i += 1) {
        if (typeof alls[i].children[0].innerHTML === "string") {
          alls[i].children[0].innerHTML = "*";
        }
      }
    }
  },