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. 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框架