成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

james / 559人閱讀

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

說明

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

開始

1.先看看Home.vue代碼

效果如下

2.賦值

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

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

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

 

        
        

          
{{item.name}}

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

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

修改第三段代碼

{{item.name}}

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

ok，代碼咱們先寫這么多，來看看頁面變化。

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

4.排序
思路：重新創(chuàng)建一個object，鍵名是從A到Z，鍵值就是獲取的數(shù)據(jù)的鍵值。
計算函數(shù)：js寫在哪？一種方法是寫在生命周期mounted的數(shù)據(jù)請求里，直接返回一個處理好的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()是把a(bǔ)scii碼轉(zhuǎn)成字符，所以num就是A,B,C,D...當(dāng)我們調(diào)用getlist函數(shù)時，得到的是mycitylist（當(dāng)citylist改變時，無需重新調(diào)用，mycitylist會隨之改變）
函數(shù)寫好了在哪調(diào)用呢？

    

        
        

          
{{item.name}}

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84951.html

相關(guān)文章

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

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

    levius 評論0 收藏0

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

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

    mmy123456 評論0 收藏0

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

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

    fantix 評論0 收藏0

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

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

    JeOam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<