主要做一下三条
- 新制作了一个城市选择的页面（容器），通过指令 v-if 控制它是否显示；
- 城市列表通过指令 v-for 来循环遍历；
- 增加了一个 modal 框，用来提示用户信息。
界面的改动
界面布局略微做了一些改动：先前的布局、新增的城市选择界面、弹出框三个容器，用新的 div 包装起来：
这三这 div 都设置相同的 css 样式，铺满整个容器 ：
还使用了 vue 自带的过渡组件 <transition> 置在最外层，从而获得页面（容器）的转场效果。
按照官方方法添加过渡类：其中fade 和 scale 是自定义的名字，分别对应 <transition> 标签的 name 属性值。
.fade-enter-ative, .fade-enter, .fade-leave-to
.scale-enter-ative, .scale-enter, .scale-leave-to
页面切换
vue 是数据驱动界面的框架，所以我们可以利用 v-if 去绑定一个值，通过值的真假性去控制界面是否显示。
页面的切换并不是真正意义上的 html 页面的切换，我们的做法是通过切换不同的 div容器 , 来模拟整张页面的切换效果。这要求我们要把预先写好 html代码，随时等候调用。
当然有同学认为这样会影响 html 文件的代码体积，从而影响加载的速度和性能，这样理解是正确的。在小工程里，我们可以通过div容器的切换来模拟单页面 webapp 的实现，这样在代码量不多的时候开发会很便捷，但当工程稍稍复杂之后我们建议通过构建vue组件或者使用单页面 .vue文件组件，前者可以抽取成 .js 文件，后者可以通过搭配 vue router 去组织页面的切换，这样会更好。
城市选择的列表页面：
<div id="city-picker" class="city-picker" v-if="cityPickerShow">v-if 绑定 cityPickerShow ，然后在逻辑代码里面设置 cityPickerShow 的真假，激活 toggleVeiw 方法的时候，将 cityPickerShow 和 inputShow 的值取反，让绑定了这两个值的界面进行切换。
HTML：
Script：
我们将 toggleVeiw( ) 方法绑定在选择城市的控件上，当点击该控件的时候，界面就可以迅速进行切换 ：
<input id="city" type="text" placeholder="请输入城市" v-model="city" readonly @click="toggleView">
我们同样地在城市列表页面的每一个列表项绑定一个方法 onSelected( )，onSelected( ) 不仅调用了先前的 toggleVeiw( )方法 ， 同时还将选中的数据保存到 data 中的 city 里：
<div class="flex cross-center city-name" v-for="(item,index) in cityList" :key="item.id" @click="onSelected(item)">
v-for列表循环
第2点的城市列表使用到了 v-for="(item,index) in cityList" 这样的代码，重点讲一下 v-for。
v-for 是用来遍历数组内容的 vue 指令。
我们的 data 有一个数组，里面保存了我们的城市数据，现在需要要数据全部显示到界面上：
可以是 copy x 100；
可以是 Ctrl + V x 100 ；
也可以是 jQuery each( ) 然后 append( ) 。
在 vue 这里上述的三种方法都不需要，只需要 v-for 指令就可以轻松实现。
<div v-for="(item,index) in cityList" @click="onSelected(item)">cityList 是我们 data 里面的数组，item 和 index 是两个参数，分别代表当前的源数据的别名，当前值的下标。
当需要显示数据在页面的时候，就用插值语法： { { item.cityName }} ，其实本质上是 { { cityList[0].cityName }} ... { { cityList[4].cityName }}
我们在绑定事件的时候，可以顺势把参数带上，如上面看到的 onSelected(item)，这样我们就可以在方法内部使用这个参数了。
modal框的制作
同样我们需要预先写好 html 结构，然后通过对最外层的div写入 v-if 指令去绑定一个值 modalShow，通过 modalShow 的真假性去控制它是否显示。
HTML：
Script：
当然还要用 <transition> 组件去控制它的动画效果，这里给的 name="scale" 让这个 modal 进场的时候从小到大进行平滑过渡。
和第一点一样，过渡类的写法参照官方：
.scale-enter-ative, .scale-enter, .scale-leave-to切换动作
当用户填写信息完毕，开始授权按钮亮起，点击后此时在它身上绑定的 nextButtonClick( ) 方法开始运行，将实例的数据 modalShow 设置为 true , modal框显示；
当modal框弹出，我们在modal框里面的确认按钮绑定了 modalButtonClick( ) 方法，点击该按钮后 modalButtonClick( )将 modalShow 设置为 false , modal框关闭 。
