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

james 发布于2019-08-20 18:58 / 521人阅读

摘要：的命令都用来开头。用来绑定属性。排序思路重新创建一个，键名是从到，键值就是获取的数据的键值。计算函数写在哪一种方法是写在生命周期的数据请求里，直接返回一个处理好的，但咱们用另一种方法计算属性。把这个加到城市名字的上即可解决。

说明

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

开始

1.先看看Home.vue代码

效果如下

2.赋值

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

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

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

 
        
        
          {{item.name}}

修改第一段代码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属性。

修改第三段代码

{{item.name}}

老铁们要注意，若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会随之改变）
函数写好了在哪调用呢？

    
        
        
          {{item.name}}

只是把中的citylist替换成getlist即可。
看看页面结果

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

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

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

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

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

云服务器 GPU云服务器饿了么饿了么 js 饿了么配送调度饿了么api接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84951.html

vue从创建到完整的饿了么（4）Home.vue布局及vue-resource使用

摘要：咱们在第一章创建的时候已经安装了。而从创建到使用到结束分为了十个周期，称为生命周期钩子，而是把数据加载的的时候调用这是我目前的理解。中有两个函数，第一个是请求成功的函数，第二个是请求失败的函数。说明 1.上一章--引入UI框架2.苍渡大神Github源码地址--源码地址3.UI框架用的是Mint UI，上一章已经引入4.数据接口地址--Github5.下一章--v-for,v-bin...

levius 2019-08-20 18:58 评论0 收藏0
vue从创建到完整的饿了么（2）路由

摘要：首先在下创建文件夹，在下创建文件，所有的路由控制都写在这个文件里。表示路径，表示显示的页面要显示哪个文件，表示的嵌套的路由。说明上一篇地址--创建苍渡大神Github项目源码地址--源码地址下一篇地址--引入UI框架 home.vue 创建根据源码，先在src文件夹下新建文件夹page，在page中新建home文件夹，在home文件夹中新建home.vue，hom...

mmy123456 2019-08-20 18:53 评论0 收藏0
vue从创建到完整的饿了么（3）引入UI框架

摘要：说明上一章从创建到完整的项目路由苍渡大神项目源码地址地址下一章布局以及框架咱们先看一下的效果图，原网址在此接下来用什么框架呢因为以前用的是，所以这次用练练手，文档在此首先下载结果如图那两个警告说的啥我也不懂，先不管大神指说明上一章--vue从创建到完整的项目（2）路由苍渡大神项目源码地址--Github地址下一章--Home布局以及vue-resource UI框架 ...

fantix 2019-08-20 18:53 评论0 收藏0
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0