思路速记 待完善

data() {
    return {
      list: [
        {
          page: 1,
          pageConten: [
            {
              tag: "p",
              content:
                "根据《中华人民共和国教育法》《中华人民共和国民办教育促进法》等有关法律、法规的规定，甲乙双方遵循平等、自愿、公平、诚实、守信的原则，遵循教育规律和青少年健康成长规律，经协商一致，签订本合同。",
              class: "font-family-4 color-red",
            },
            {
              key: "p1",
              tag: "span",
              content: '我是第一页的第二句',
            },
          ],
        },
        {
          page: 2,
          pageConten: [
            {
              tag: "p",
              content: "我是第二页",
              class: "font-family-4 color-red",
            },
          ],
        },
      ],
    };
  },
 methods: {
    testAPI() {
      let a = this.list[0].pageConten.filter((x) => x.key == "p1");
      console.log(a);
      a[0].content = '888'
    },
  },

  <div @click="testAPI">testAPI</div>
    <div v-for="(item, index) in list" :key="index">
      <div class="page print">
        {{ item.page }}
        <div
          v-for="(itemChild, index) in item.pageConten"
          :key="index + 'child'"
        >
          <p
            :class="itemChild.class ? itemChild.class : ''"
            v-if="itemChild.tag == 'p'"
          >
            {{ itemChild.content }}
          </p>

          <span
            :class="itemChild.class ? itemChild.class : ''"
            v-if="itemChild.tag == 'span'"
          >
            {{ itemChild.content }}
          </span>
        </div>
      </div>
    </div>

.contract-container {
  font-size: 16pt;
  color: #000000;
  font-family: FangSong, Arial, Helvetica, sans-serif;
  background-color: #fff;
}
.page {
  margin: 10px auto;
  border: 1px solid #ccc;
  width: 554px;
  height: 980px;
  padding: 50px 30px 0;
}
.print {
  page-break-after: always;
}

效果：

核心是将view与model分离