html - 如何在“step===2”中重用“step===1”模板

Question

这里我写了两个步骤，一个是“step===1”，另一个是“step===2”。所以在这里我想将step1模板重用到step2。这意味着我们有第一步模板，在第一步我们点击下一步按钮，所以在下一步我想显示相同的模板，比如重用..

<div v-if="step === 1">

    <h1>Step One</h1>
    <h4>Address</h4>
    <label>Address</label>
    <input type="text" v-model="address">

    <label>City</label>
    <input type="text" v-model="city">

    <label>State</label>
    <input type="text" v-model="state">

    <button @click.prevent="next()">Next</button>

 </div>
<div v-if="step === 2">
    reuse step===1 template here
</div>

Vue.js

export default {
    data() {
        return {
            address: null,
            city: null,
            state: null
        }
    },
    methods:{
    prev() {
      this.step--;
    },
    next() {
      this.step++;
    },
 }
</script>

标签： htmlvue.js