[英]How do I change the html on the page using vue.js?
I have a div that holds a lot of html. 我有一个保存很多html的div。 I need to entirely change the content of that div to another totally different set of html. 我需要将div的内容完全更改为另一组完全不同的html。 I also have to accomplish all this with Vue.js and without refreshing the page. 我还必须使用Vue.js完成所有这些操作,而无需刷新页面。
I tried making the div on another page, but the problem is that the data gets lost, so I have to do it without the page changing. 我尝试在另一个页面上制作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>
I expect to be able to change the content of the div questions when I click on the button 'end test'. 我希望能够在单击“结束测试”按钮时更改div问题的内容。
You could add multiple sections and toggle between them. 您可以添加多个部分并在它们之间切换。
For example your markup could be: 例如,您的标记可能是:
<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;
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.