vue从创建到完整的饿了么（5）v-for，v-bind与计算属性

说明

1.上一章--Home.vue及vue-resource使用
2.cangdu大神的项目源码地址--Github地址
3.接口地址--Github地址
4.UI框架用的是--Mint UI
5.下一章--登录注册页面及密码的暗明文转换

开始

1.先看看Home.vue代码

<template>
  <div>
    
        <mt-header fixed>
            <span slot="left">elm</span>
            <mt-button slot="right">登录|</mt-button>
            <mt-button slot="right">注册</mt-button>
        </mt-header>
    

    <div class="padtop40">
      <div class="after ih50 padlr10 box bgfff">
        <span  class="">当前选择城市</span>
        <span  class="right fs0-8 col9f">定位不准时，请在城市列表选择</span>
      </div>
      <mt-cell  title="天津" class="col after" to=""  is-link  value=""></mt-cell>

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="热门城市"></mt-cell>
        <div class="itembox ovhid col">
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
        </div>        
      </div>         

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="A"></mt-cell>
        <div class="itembox ovhid">
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div>
        </div>        
      </div>    

    </div>
    
  </div>
</template>

<script>

export default {
  data () {
    return {
     
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      this.$http.get('http://cangdu.org:8001/v1/cities?type=group').then(response => {
        console.log(response);
      }, response => {
        console.log(response);
        
      });
  },
  computed:{
  //计算属性

  },
  methods:{
  //函数

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{
  width:25%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  border-right:1px solid #e4e4e4;
  border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){
  border-right:0px;
}
</style>

效果如下图片描述

2.赋值

首先我们要把城市列表的信息先赋值给一个变量，这样我们就可以调用了嘛。图片描述

3.v-for
城市列表我们有了，但是我们怎么把它显示到页面呢？难道要用for循环拼接字符串插到页里么？NONONO，那还是操作DOM节点，而VUE的好处之一就是操作数据来控制DOM。循环VUE用的是v-for，home.vue的html部分代码修改如下

<template>
  <div>
    
        <mt-header fixed>
            <span slot="left">elm</span>
            <mt-button slot="right">登录|</mt-button>
            <mt-button slot="right">注册</mt-button>
        </mt-header>
    

    <div class="padtop40">
      <div class="after ih50 padlr10 box bgfff">
        <span  class="">当前选择城市</span>
        <span  class="right fs0-8 col9f">定位不准时，请在城市列表选择</span>
      </div>
      <mt-cell  title="天津" class="col after" to=""  is-link  value=""></mt-cell>

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="热门城市"></mt-cell>
        <div class="itembox ovhid col">
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
        </div>        
      </div>         

       <div v-for="(items,index) in citylist" class="mgtop10 bgfff">
        <mt-cell class="after" :title="index"></mt-cell>
        <div class="itembox ovhid">
          <div v-for="item in items">{{item.name}}</div>
        </div>        
      </div>  

    </div>
    
  </div>
</template>

其实只是把全部城市列表的代码修改如下

 <div v-for="(items,index) in citylist" class="mgtop10 bgfff">
        <mt-cell class="after" :title="index"></mt-cell>
        <div class="itembox ovhid">
          <div v-for="item in items">{{item.name}}</div>
        </div>        
 </div>

修改第一段代码v-for="(items,index) in citylist"
citylist是一个object对象（也可以是数组），items是citylist的每一项键值，index是items的键名（若为数组则是1，2,3...递增）。citylist有多少项，就会循环多少次，就会产生多少个元素（该元素为 v-for 写在的那个元素，其内的子元素也会自动生成）。然后就可以用item在元素中当做键值来使用。

修改第二段代码:title="index"
因为咱们获取的数据的键名就是A,B,C,D...所以咱们的城市列表直接用index来排序。而:title="index"是 v-bind:title="index"的缩写。vue的命令都用v-来开头。v-bind用来绑定DOM属性。

修改第三段代码<div v-for="item in items">{{item.name}}</div>
老铁们要注意，若items是A开头的城市数组集合，而item是items的每一项，即一个具体的城市（这只是举一个例子）

ok，代码咱们先写这么多，来看看页面变化。图片描述

全部出现！！老铁们可以看到，咱们只需要写一个模板，vue会帮我们自动生成所有的数据。但是还有几个问题需要处理一下
1.数据的顺序并不是从A挨个排到Z；
2.有的城市名字太长出现重叠。

4.排序
思路：重新创建一个object，键名是从A到Z，键值就是获取的数据的键值。
计算函数：js写在哪？一种方法是写在生命周期mounted的数据请求里，直接返回一个处理好的citylist，但咱们用另一种方法--计算属性computed。home.vue部分是代码修改如下

computed:{
  //计算属性
      getlist:function(){
        var mycitylist={};
          for(var i=65;i<=90;i++){
            var num= String.fromCharCode(i);
            mycitylist[num]=this.citylist[num];
          }
          return mycitylist
      }
  },

fromCharCode()是把ascii码转成字符，所以num就是A,B,C,D...当我们调用getlist函数时，得到的是mycitylist（当citylist改变时，无需重新调用，mycitylist会随之改变）
函数写好了在哪调用呢？

    <div v-for="(items,index) in getlist" class="mgtop10 bgfff">
        <mt-cell class="after" :title="index"></mt-cell>
        <div class="itembox ovhid">
          <div v-for="item in items">{{item.name}}</div>
        </div>        
      </div>

只是把<template></template>中的citylist替换成getlist即可。
看看页面结果图片描述

解决！城市已经按照A-Z排列，只剩下名字长度问题了，设置为单行不换行超出省略号即可，在src下的style下的mycss.css添加

.nowarp{
    white-space:nowrap;          /* 不换行 */
    overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

把nowarp这个class加到城市名字的div上即可
图片描述

解决。这么看城市列表是没有问题了，那咱们接下来请求热门城市和当前城市。home.vue修改如下

<template>
  <div>
    
        <mt-header fixed>
            <span slot="left">elm</span>
            <mt-button slot="right">登录|</mt-button>
            <mt-button slot="right">注册</mt-button>
        </mt-header>
    

    <div class="padtop40">
      <div class="after ih50 padlr10 box bgfff">
        <span  class="">当前选择城市</span>
        <span  class="right fs0-8 col9f">定位不准时，请在城市列表选择</span>
      </div>
      <mt-cell  :title="nowcity.name" class="col after" to=""  is-link  value=""></mt-cell>

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="热门城市"></mt-cell>
        <div class="itembox ovhid col">
          <div v-for="item in hotcity">{{item.name}}</div>
        </div>        
      </div>         

      <div v-for="(items,index) in getlist" class="mgtop10 bgfff">
        <mt-cell class="after" :title="index"></mt-cell>
        <div class="itembox ovhid">
          <div class="nowarp" v-for="item in items">{{item.name}}</div>
        </div>        
      </div>  

    </div>
    
  </div>
</template>

<script>

export default {
  data () {
    return {
      citylist:"",
      hotcity:"",
      nowcity:""
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      //城市列表
      this.$http.get('http://cangdu.org:8001/v1/cities?type=group').then(response => {
        console.log(response);
        this.citylist=response.body;
      }, response => {
        console.log(response);
        
      });
      //热门城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=hot').then(response => {
        console.log(response);
        this.hotcity=response.body;
      }, response => {
        console.log(response);
        
      });
      //定位城市
      this.$http.get('http://cangdu.org:8001/v1/cities?type=guess').then(response => {
        console.log(response);
        this.nowcity=response.body;
      }, response => {
        console.log(response);
        
      });

  },
  computed:{
  //计算属性
      getlist:function(){
        var mycitylist={};
          for(var i=65;i<=90;i++){
            var num= String.fromCharCode(i);
            mycitylist[num]=this.citylist[num];
          }
          return mycitylist
      }
  },
  methods:{
  //函数

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{
  width:25%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  border-right:1px solid #e4e4e4;
  border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){
  border-right:0px;
}
</style>

页面结果如下图片描述
搞定！home.vue大致写完了，剩下就是交互了

vue从创建到完整的饿了么（5）v-for，v-bind与计算属性

说明

开始

你的前端

引用和评论

vue从创建到完整的饿了么（19）阻止事件冒泡

腾讯新闻中心首页改版啦

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号