亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue從創(chuàng)建到完整的餓了么（5）v-for，v-bind與計(jì)算屬性

james / 595人閱讀

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

說(shuō)明

1.上一章--Home.vue及vue-resource使用
2.cangdu大神的項(xiàng)目源碼地址--Github地址
3.接口地址--Github地址
4.UI框架用的是--Mint UI
5.下一章--登錄注冊(cè)頁(yè)面及密碼的暗明文轉(zhuǎn)換

開始

1.先看看Home.vue代碼

效果如下

2.賦值

首先我們要把城市列表的信息先賦值給一個(gè)變量，這樣我們就可以調(diào)用了嘛。

3.v-for
城市列表我們有了，但是我們?cè)趺窗阉@示到頁(yè)面呢？難道要用for循環(huán)拼接字符串插到頁(yè)里么？NONONO，那還是操作DOM節(jié)點(diǎn)，而VUE的好處之一就是操作數(shù)據(jù)來(lái)控制DOM。循環(huán)VUE用的是v-for，home.vue的html部分代碼修改如下

其實(shí)只是把全部城市列表的代碼修改如下

 

        
        

          
{{item.name}}

修改第一段代碼v-for="(items,index) in citylist"
citylist是一個(gè)object對(duì)象（也可以是數(shù)組），items是citylist的每一項(xiàng)鍵值，index是items的鍵名（若為數(shù)組則是1，2,3...遞增）。citylist有多少項(xiàng)，就會(huì)循環(huán)多少次，就會(huì)產(chǎn)生多少個(gè)元素（該元素為 v-for 寫在的那個(gè)元素，其內(nèi)的子元素也會(huì)自動(dòng)生成）。然后就可以用item在元素中當(dāng)做鍵值來(lái)使用。

修改第二段代碼:title="index"
因?yàn)樵蹅儷@取的數(shù)據(jù)的鍵名就是A,B,C,D...所以咱們的城市列表直接用index來(lái)排序。而:title="index"是 v-bind:title="index"的縮寫。vue的命令都用v-來(lái)開頭。v-bind用來(lái)綁定DOM屬性。

修改第三段代碼

{{item.name}}

老鐵們要注意，若items是A開頭的城市數(shù)組集合，而item是items的 每一項(xiàng)，即一個(gè)具體的城市（這只是舉一個(gè)例子）

ok，代碼咱們先寫這么多，來(lái)看看頁(yè)面變化。

全部出現(xiàn)??！老鐵們可以看到，咱們只需要寫一個(gè)模板，vue會(huì)幫我們自動(dòng)生成所有的數(shù)據(jù)。但是還有幾個(gè)問(wèn)題需要處理一下
1.數(shù)據(jù)的順序并不是從A挨個(gè)排到Z；
2.有的城市名字太長(zhǎng)出現(xiàn)重疊。

4.排序
思路：重新創(chuàng)建一個(gè)object，鍵名是從A到Z，鍵值就是獲取的數(shù)據(jù)的鍵值。
計(jì)算函數(shù)：js寫在哪？一種方法是寫在生命周期mounted的數(shù)據(jù)請(qǐng)求里，直接返回一個(gè)處理好的citylist，但咱們用另一種方法--計(jì)算屬性computed。home.vue部分是代碼修改如下

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

fromCharCode()是把a(bǔ)scii碼轉(zhuǎn)成字符，所以num就是A,B,C,D...當(dāng)我們調(diào)用getlist函數(shù)時(shí)，得到的是mycitylist（當(dāng)citylist改變時(shí)，無(wú)需重新調(diào)用，mycitylist會(huì)隨之改變）
函數(shù)寫好了在哪調(diào)用呢？

    

        
        

          
{{item.name}}

只是把中的citylist替換成getlist即可。
看看頁(yè)面結(jié)果

解決！城市已經(jīng)按照A-Z排列，只剩下名字長(zhǎng)度問(wèn)題了，設(shè)置為單行不換行超出省略號(hào)即可，在src下的style下的mycss.css添加

.nowarp{
    white-space:nowrap;          /* 不換行 */
    overflow:hidden;               /* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
    text-overflow:ellipsis;   /* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}

把nowarp這個(gè)class加到城市名字的div上即可

解決。這么看城市列表是沒有問(wèn)題了，那咱們接下來(lái)請(qǐng)求熱門城市和當(dāng)前城市。home.vue修改如下

頁(yè)面結(jié)果如下
搞定！home.vue大致寫完了，剩下就是交互了

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84951.html

相關(guān)文章

  • vue從創(chuàng)建到完整的餓了么（4）Home.vue布局及vue-resource使用

    摘要：咱們?cè)诘谝徽聞?chuàng)建的時(shí)候已經(jīng)安裝了。而從創(chuàng)建到使用到結(jié)束分為了十個(gè)周期，稱為生命周期鉤子，而是把數(shù)據(jù)加載的的時(shí)候調(diào)用這是我目前的理解。中有兩個(gè)函數(shù)，第一個(gè)是請(qǐng)求成功的函數(shù)，第二個(gè)是請(qǐng)求失敗的函數(shù)。 說(shuō)明 1.上一章--引入U(xiǎn)I框架2.蒼渡大神Github源碼地址--源碼地址3.UI框架用的是Mint UI，上一章已經(jīng)引入4.數(shù)據(jù)接口地址--Github5.下一章--v-for,v-bin...

    levius 評(píng)論0 收藏0

  • vue從創(chuàng)建到完整的餓了么（2）路由

    摘要：首先在下創(chuàng)建文件夾，在下創(chuàng)建文件，所有的路由控制都寫在這個(gè)文件里。表示路徑，表示顯示的頁(yè)面要顯示哪個(gè)文件，表示的嵌套的路由。 說(shuō)明 上一篇地址--創(chuàng)建 蒼渡大神Github項(xiàng)目源碼地址--源碼地址 下一篇地址--引入U(xiǎn)I框架 home.vue 創(chuàng)建 根據(jù)源碼，先在src文件夾下新建文件夾page，在page中新建home文件夾，在home文件夾中新建home.vue，hom...

    mmy123456 評(píng)論0 收藏0

  • vue從創(chuàng)建到完整的餓了么（3）引入U(xiǎn)I框架

    摘要：說(shuō)明上一章從創(chuàng)建到完整的項(xiàng)目路由蒼渡大神項(xiàng)目源碼地址地址下一章布局以及框架咱們先看一下的效果圖，原網(wǎng)址在此接下來(lái)用什么框架呢因?yàn)橐郧坝玫氖?，所以這次用練練手，文檔在此首先下載結(jié)果如圖那兩個(gè)警告說(shuō)的啥我也不懂，先不管大神指 說(shuō)明 上一章--vue從創(chuàng)建到完整的項(xiàng)目（2）路由 蒼渡大神項(xiàng)目源碼地址--Github地址 下一章--Home布局以及vue-resource UI框架 ...

    fantix 評(píng)論0 收藏0

  • vue2 + vuex 高度還原 餓了么 App，與官方后臺(tái)真實(shí)數(shù)據(jù)交互，獲取商品信息，實(shí)現(xiàn)登陸、購(gòu)

    摘要：注此項(xiàng)目純屬個(gè)人瞎搞，正常下單請(qǐng)選擇餓了么官方客戶端。目前下單功能已經(jīng)實(shí)現(xiàn)，下單功能完全采用官網(wǎng)真實(shí)數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號(hào)碼，下單后可以在手機(jī)中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時(shí)間，奈何公司的技術(shù)棧是以react為主，沒有機(jī)會(huì)好好利用vue2去做一個(gè)完整的項(xiàng)目。雖然寫了幾個(gè)demo，但和寫一個(gè)完整的項(xiàng)目還是有很大差別的。于是自己想著用空余...

    JeOam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<