Vue.js Vue是否基于step变量显示或隐藏步骤

目前这两个步骤都是隐藏的，即使步骤是1。我在这里做错了什么。当步骤是1时，它应该显示形式，当步骤是2时，它显示形式

它显示错误消息属性或方法“步骤”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：

这与我使用的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>

输入地址以获取天气信息

天气预报
格式化地址


天气预报



当前温度：温度
感觉像：临时工
风速

var app=新的Vue({
el:“#应用程序”，
数据：{
步骤：1
}
});

虽然您的代码工作正常，但可能需要使用

v-else

或

v-else-if

：

var-app=新的Vue({
el:“#应用程序”，
数据：{
步骤：2
}
});

改变步骤
输入地址以获取天气信息

天气预报
格式化地址


天气预报



当前温度：温度
感觉像：临时工
风速

可能是v-if=“step==1”或v-if=“step==2”
所以我告诉过你，你的代码也可以正常工作（请参阅）。也许你应该从这部分代码中寻找问题。