Question

当前两个步骤都被隐藏，即使该步骤是1.我在这里做错了。当步骤为1时，它应该显示表格；而当步骤为2时，它应该显示表格

它显示错误消息属性或方法“步骤”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

这与我使用Microsoft Edge的浏览器有关吗

    <div class="container" id="app">
    <div class="row">
        <div class="col-md-6 offset-md-3" v-if="step == 1">
            <h1>Enter an Address to get weather </h1>
            </hr>
            <form>
                <input type="text" name="location" class="form-control" placeholder="Enter a Zipcode and Address">
                <button  class="btn btn-primary" >Get Weather</button>
            </form>
        </div>
        <div class="col-md-6 offset-md-3" v-if="step == 2">
            <h1>Formatted Address</h1>
            </hr>
            <p>
                Weather Summmarys
            </p>
            </hr>
            <ul>
                <li>Current Temp:Temp</li>
                <li>Feels Like: Temp</li>
                <li>Wind Speed: speed</li>
            </ul>
        </div>
    </div>

</div>

     <script type="text/javascript">
var app = new Vue({
    el: '#app',
    data:{
        step: 1
    }
});
</script>

Answer 1

尽管您的代码工作正常，但可能需要使用v-else或v-else-if：

var app = new Vue({
    el: '#app',
    data:{
        step: 2
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

 <div class="container" id="app">
 <button @click="step = step == 1 ? 2 : 1">Change step</button>
    <div class="row">
        <div class="col-md-6 offset-md-3" v-if="step == 1">
            <h1>Enter an Address to get weather </h1>
            </hr>
            <form>
                <input type="text" name="location" class="form-control" placeholder="Enter a Zipcode and Address">
                <button  class="btn btn-primary" >Get Weather</button>
            </form>
        </div>
        <div class="col-md-6 offset-md-3" v-else-if="step == 2">
            <h1>Formatted Address</h1>
            </hr>
            <p>
                Weather Summmarys
            </p>
            </hr>
            <ul>
                <li>Current Temp:Temp</li>
                <li>Feels Like: Temp</li>
                <li>Wind Speed: speed</li>
            </ul>
        </div>
    </div>

</div>

Answer 2

也许是v-if =“ step === 1”或v-if =“ step === 2”

根据步骤变量查看是否显示或隐藏步骤

2 个答案: