如何使用 vue.js 更改页面上的 html？

Question

我有一个包含大量 html 的 div。我需要将该 div 的内容完全更改为另一组完全不同的 html。我还必须使用 Vue.js 完成所有这些，并且无需刷新页面。

我尝试在另一个页面上制作 div，但问题是数据丢失了，所以我必须在不改变页面的情况下这样做。

<div id='questions'>
  <div class="card card-1">
    <div class="card-header">
      <strong> [[ topic ]] | </strong> [[ subTopic ]]
    </div>
    <div class="card-body">
      [[ question ]] <br />

      <button id='1' v-on:click='validateAnswer(option1,1)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option1 ]]
      </button>
      <button id='2' v-on:click='validateAnswer(option2,2)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option2 ]]
      </button>
      <button id='3' v-on:click='validateAnswer(option3,3)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option3 ]]
      </button>
      <button id='4' v-on:click='validateAnswer(option4,4)' v-bind:disabled = 'isDisabled' class="btn btn-primary btn-block">
        [[ option4 ]]
      </button>

    </div>
    <div class="card-footer">
      <small>Authored by [[author]] on [[date]]</small>
    </div>

  </div>
  <div class="footer-buttons">
    <button class='btn btn-success' id='Previous' v-on:click='previous' :disabled = 'previousDisabled'>Previous</button>
    <button class="btn btn-danger" id='endTest' v-on:click="endTest" >End Test</button>
    <button class='btn btn-success' id='Next' v-on:click="next">Next</button>
  </div>
</div>

我希望能够在单击“结束测试”按钮时更改 div 问题的内容。

Answer 1

您可以添加多个部分并在它们之间切换。

例如，您的标记可能是：

<div id='questions'>
  <div class="card card-1">
    <div class="card-header">
      <strong> [[ topic ]] | </strong> [[ subTopic ]]
    </div>

    <div v-show="sectionOne" class="card-body">
        foo questions
    </div>
    <div v-show="sectionTwo" class="card-body">
        bar questions
    </div>

    <div class="card-footer">
      <small>Authored by [[author]] on [[date]]</small>
    </div>

  </div>
  <div class="footer-buttons">
    <button class='btn btn-success' id='Previous' v-on:click='previous' :disabled = 'previousDisabled'>Previous</button>
    <button class="btn btn-danger" id='endTest' v-on:click="endTest" >End Test</button>
    <button class='btn btn-success' id='Next' v-on:click="next">Next</button>
  </div>
</div>

var app = new Vue({
  el: '#questions',
  data: {
    sectionOne: true,
    sectionTwo: false
  },
  methods: {
    nextButton: function () {
        this.sectionOne = false;
        this.sectionTwo = true;
    }
  }
})