Vue学习笔记-项目开发3.5右侧循环数据（城市列表字母表）

城市右侧字母表的循环原理：新建一个组件，然后通过样式将组件定位到右侧显示即可

1、字母表组件

//Alphabet.vue
<template>
  <ul class="list">
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
    <li class="item">A</li>
 
  </ul>
</template>
 
<script>
export default {
  name: 'CityAlphabet'
}
</script>
 
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .list
    display: flex
    flex-direction: column
    justify-content: center
//设置字母表的位置在靠右，宽度，和距离顶部的距离
    position: absolute
    right: 0
    top: 1.58rem
    bottom: 0
    width: .4rem
    .item
// 设置字母居中和间距
      line-height: .4rem
      text-align: center
      color: $bgColor
</style>

2、城市组件

<template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list></city-list>
    <city-alphabet></city-alphabet>
 
  </div>
</template>
 
<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
//就这货
import CityAlphabet from './components/Alphabet'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  }
}
</script>
 
<style>
 
</style>

3、样式说明
      flex-direction： 表示弹性盒子中的元素的排列顺序。可以按行，或按列，或者按行但是反向排序，或者按列反向排序。 在咱们代码中是按列表徐。 不过使用这个参数的前提是需要有加display: flex参数(设置为弹性盒子) 不然无效。
可参考：http://www.runoob.com/cssref/css3-pr-flex-direction.html
      justify-content：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 如果使用 align-content 属性对齐交叉轴上的各项（垂直）。也就是元素的水平对齐方式 是左对齐还是右对齐还是居中对齐还是两端对齐还是环绕对齐。咱们代码中是center也就是水平居中对齐各个元素。