vue從創建到完整的餓了么（5）v-for，v-bind與計算屬性

james 發布于2019-08-20 18:58 / 523人閱讀

摘要：的命令都用來開頭。用來綁定屬性。排序思路重新創建一個，鍵名是從到，鍵值就是獲取的數據的鍵值。計算函數寫在哪一種方法是寫在生命周期的數據請求里，直接返回一個處理好的，但咱們用另一種方法計算屬性。把這個加到城市名字的上即可解決。

說明

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接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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