vue從建立到完整的餓了麼（5）v-for，v-bind與計算屬性
說明
1.上一章--Home.vue及vue-resource使用
2.cangdu大神的項目源碼地址--Github地址
3.接口地址--Github地址
4.UI框架用的是--Mint UI
5.下一章--登陸註冊頁面及密碼的暗明文轉換css
開始
1.先看看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 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>
效果以下
vue
2.賦值node
首先咱們要把城市列表的信息先賦值給一個變量，這樣咱們就能夠調用了嘛。
git
3.v-for
城市列表咱們有了，可是咱們怎麼把它顯示到頁面呢？難道要用for循環拼接字符串插到頁裏麼？NONONO，那仍是操做DOM節點，而VUE的好處之一就是操做數據來控制DOM。循環VUE用的是v-for，home.vue的html部分代碼修改以下github
<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>
其實只是把所有城市列表的代碼修改以下segmentfault
<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在元素中當作鍵值來使用。api
修改第二段代碼: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大體寫完了，剩下就是交互了
相關文章
- 1. vue從建立到完整的餓了麼（14）shop.vue
- 2. vue從建立到完整的餓了麼（15）組件動畫
- 3. vue從建立到完整的餓了麼（2）路由
- 4. vue從建立到完整的餓了麼（12）miste.vue
- 5. vue從建立到完整的餓了麼（1）建立（包含vuex）
- 6. vue從建立到完整的餓了麼（13）餓了麼loading圖及多個請求時顯示與隱藏
- 7. vue從建立到完整的餓了麼（4）Home.vue佈局及vue-resource使用
- 8. vue從建立到完整的餓了麼（9）頁面圖標ico的設置
- 9. vue從建立到完整的餓了麼（8）city.vue佈局以及vuex的state屬性簡單使用
- 10. vue從建立到完整的餓了麼（3）引入UI框架
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • Web 創建設計 - 網站建設指南
- • JDK13 GA發佈：5大特性解讀
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue從建立到完整的餓了麼（14）shop.vue
- 2. vue從建立到完整的餓了麼（15）組件動畫
- 3. vue從建立到完整的餓了麼（2）路由
- 4. vue從建立到完整的餓了麼（12）miste.vue
- 5. vue從建立到完整的餓了麼（1）建立（包含vuex）
- 6. vue從建立到完整的餓了麼（13）餓了麼loading圖及多個請求時顯示與隱藏
- 7. vue從建立到完整的餓了麼（4）Home.vue佈局及vue-resource使用
- 8. vue從建立到完整的餓了麼（9）頁面圖標ico的設置
- 9. vue從建立到完整的餓了麼（8）city.vue佈局以及vuex的state屬性簡單使用
- 10. vue從建立到完整的餓了麼（3）引入UI框架